如何使Bootstrap 3列在不同高度时正确对齐？
如何使Bootstrap 3列在不同高度时正确对齐？
提问于 2015-01-23 20:45:00
我对Bootstrap 3列有一个问题。当12列被填充并且我不断添加列时，它们在它们下面堆叠(正常行为)。但是，如果它们顶部的柱具有不同的高度，则会创建一条边沟。有没有办法去掉它，这样它们就可以正确对齐(不留空格)？(台式机)
<div class="row content clearfix">
<div class="col-md-4 itms">
<div class="user">
<a href="#" class="thumbnail-custom">
<img src="logo.jpg" alt="User">
</a>
<p>Posted by:</p>
<p>User</p>
</div>
</div>
</div>和CSS：
.col-md-4{
margin: 0;
padding: 0;
min-height: 100px;
}
.itms {
border: 2px solid rgba(54, 21, 21, 1);
}
.user{
padding: 5px 0 0 5px;
max-width: 80px;
border-right: 2px solid rgba(54, 21, 21, 1);
}
.user img{
margin-top: 5px;
max-width: 77px;
max-height: 77px;
margin: -5px 0 0 -5px;
border-bottom: 2px solid rgba(54, 21, 21, 1);
}回答 1
Stack Overflow用户
发布于 2015-01-23 23:43:54
您可以使用行分隔的列，这样它们就不会在彼此下面移动，或者(就像我一样)使用flex。如果必须支持等高列的IE8，还可以做其他事情。等高是我知道的唯一让它们不像你的问题所显示的那样移动的方法。(How can I make Bootstrap columns all the same height?)。
下面是一个简单的引导程序，向您展示如何做到这一点：http://bootply.com/127827
创建一个自定义类，以使用以下值附加到行：
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28110259
复制相关文章
相似问题
腾讯云开发者
