html - 如何在引导程序 3 的 div 中间放置一个按钮?
问题描述
在我的带有 bootstrap 3 的 html 中,我在带有 col-xs-class 的 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>
推荐阅读
- momentjs - Moment.js 没有显示正确的时间
- python - 如何在 python 中使用 for 循环向数组中添加一行?
- java - 我应该避免常用的类名吗?
- sql - 合并数据库时的主键冲突(自增)
- c# - DesignAutomationClient() 对象创建失败并出现 System.TypeLoadException
- r - 如何在 R 中连接数据框的行?
- powershell - Powersell 删除名称不在 sql 输出中的子文件夹
- java - 怎么调试,输出错误?
- amazon-web-services - 自动配置实例以连接到数据库集群端点
- xslt - 使用 XSLT 将父 XML 元素拆分为相等数量的子元素