Bootstrap 3:如何将列内容与行底对齐
Bootstrap 3:如何将列内容与行底对齐
提问于 2014-03-29 07:31:20
我在Bootstrap 3中有一行，在该行中有3列。我希望将其中两列与行的底部对齐，并将第一列保持在顶部。当我使用传统的方法，在父级中使用位置相对，在两个列中都使用绝对时，我得到了一个奇怪的行为，我想这是因为twitter引导程序中的某些东西。以下是正在发生的事情的引导：
绝对力把所有的柱子都压在一起，有人能帮我吗？最终的结果如下所示：
http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/
谢谢
回答 3
Stack Overflow用户
发布于 2014-03-29 07:57:33
您可以在要底部对齐的两列上使用display: table-cell和vertical-align: bottom，如下所示：
.bottom-column
{
float: none;
display: table-cell;
vertical-align: bottom;
}工作示例here。
此外，这可能是一个可能的duplicate question。
Stack Overflow用户
发布于 2014-03-29 08:02:59
垂直对齐底部并移除浮动似乎是可行的。然后我有了一个边际问题，但-2px可以防止它们被压下(它们仍然不会重叠)
.profile-header > div {
display: inline-block;
vertical-align: bottom;
float: none;
margin: -2px;
}
.profile-header {
margin-bottom:20px;
border:2px solid green;
display: table-cell;
}
.profile-pic {
height:300px;
border:2px solid red;
}
.profile-about {
border:2px solid blue;
}
.profile-about2 {
border:2px solid pink;
}Stack Overflow用户
发布于 2017-03-22 18:18:26
我不知道为什么，但是对我来说，Marius Stanescu提出的解决方案打破了col1的特殊性(在col 3之后是col 4将占据所有的12行)
我找到了另一个可行的解决方案：
.bottom-column
{
display: inline-block;
vertical-align: middle;
float: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22724952
复制相关文章
相似问题