我正在使用 Bootstrap 3,我需要在列的内容中具有相同高度的列,并且能够垂直对齐
<div class="row">
<div class="col-xs-12 col-sm-3">
vertical align top
</div>
<div class="col-xs-12 col-sm-3">
vertical align middle
</div>
<div class="col-xs-6 col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-xs-6 col-sm-3">
vertical align bottom
</div>
</div>
最佳答案
这是可以实现的,但会带走一些 Bootstrap 的内置功能。主要是网格系统移动渲染的媒体查询。
实现这一目标的最佳方法可能是使用 flexbox 方法。 Demo .
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3 vcenter">
vertical align middle
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3 vbottom">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter{
display:flex;
flex-direction:column;
justify-content:center;
}
.vbottom{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
第二种方法是使用绝对定位垂直对齐和 flexbox 匹配高度。 查看demo .
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3">
<div class="vcenter">
vertical align middle
</div>
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter {
position: absolute;
top: 50%;
}
另一种选择是使用 JavaScript 为您固定高度和垂直对齐方式。你可以使用 matchHeight.js .
使用起来相当简单。您只需用另一个 <div>
包装您想要匹配高度的所有列内容。同类.box
<div class="row">
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
</div>
然后在您的 JavaScript 文件或 <script></script>
中加载文档时实例化它JQuery 链接后的标记。
$('.box').matchHeight();
坚持使用 JavaScript 进行垂直对齐,您可以添加 .vcenter
到 .box
您想要垂直对齐的元素并执行类似的操作:
var height = $('.vcenter').height();
$('.vcenter').css('margin-top', (height/2));
$('.vcenter').css('margin-bottom', -(height/2));
var $window = $(window);
var windowsize = $window.width();
function checkWidth(){
if (windowsize < 440) {
$('.vcenter').removeAttr("style");
}
}
$(window).resize(checkWidth);
计算.box
的高度然后除以 2 以确定内容的顶部和底部边距。然后我们确定窗口的宽度,并在调整大小时删除边距。这部分未经测试,但我相信在理论上是可行的。这是一个 demo的 matchHeight.js .和 here's关于 bootstrap 中列高匹配的有用博客。
最后两种垂直对齐方式效果不佳,但应该可行。
关于css - 具有垂直对齐的相同高度的 Bootstrap 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38622961/