如何解决如何在bootstrap 3中的div中间放置一个按钮?
在带有 bootstrap 3 的 html 中,我在带有 col-xs- 类的 div 中定义了 3 列。
第一个和第三个是列表。 在中间列中,我想放置一个按钮,通过 jquery 将元素从第一个列表传输到第三个列表。
我希望该按钮位于两个列表的中间并具有响应性。 我试过了,但是按钮没有很好地居中在中间,也不能很好地适应屏幕的不同宽度。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3">
... list1 code
</div>
<div class="col-xs-3 ">
<div class="contenedor-de-lista father" style="background-color: skyblue;">
<div class="text-center">
<button type="button" class="btn btn-default child"> > </button>
</div>
</div>
</div>
<div class="col-xs-6">
... list3 code
</div>
div{
height: 50rem;
}
.contenedor-de-lista {
height: 50rem;
}
.father{
position: relative;
}
.child {
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}
https://jsfiddle.net/JorgePalaciosZaratiegui/vn8sgrcq/18/
如何使按钮保持在中间并适合引导类 col-md-x 工作时的屏幕大小。
提前致谢
解决方法
#container{
display:flex;
justify-content:space-between;
align-items:flex-start;
}
.father{
display:flex;
flex-direction:column;
justify-content:center;
height:100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id='container'>
<div >
... list1 code
</div>
<div >
<div class="contenedor-de-lista father" style="background-color: skyblue;">
<button type="button" class="btn btn-default child"> > </button>
</div>
</div>
<div >
... list3 code
</div>
</div>
您可以使用 flex
来居中元素。我已经编辑了您的代码。
将 display: flex
添加到类 .text-center
div{
height: 50rem;
}
.contenedor-de-lista {
height: 50rem;
}
.father{
position: relative;
}
.text-center{
display:flex;
justify-content:center;
align-items:center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3">
... list1 code
</div>
<div class="col-xs-3 ">
<div class="contenedor-de-lista father" style="background-color: skyblue;">
<div class="text-center">
<button type="button" class="btn btn-default child"> > </button>
</div>
</div>
</div>
<div class="col-xs-6">
... list3 code
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。