Question

我的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);
 }

Answer 1

您要么将列与行分隔开来，以便它们不会相互移位，或者（就像我一样）使用flex。如果你必须支持等高度列的IE8，你也可以做其他事情。相同的高度是我知道的唯一方法，使它们不像您的问题所表明的那样移动。（How can I make Bootstrap columns all the same height?）。

这是一个简单的Bootply，向您展示如何做到这一点：http://bootply.com/127827

创建一个自定义类，以附加到具有以下值的行：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;

如何使Bootstrap 3列在不同高度时正确对齐？

1 个答案: