Bootstrap 3：如何将列内容与行底部对齐

Question

我在该行的Bootstrap 3和3列中有一行。我想将两列对齐到行的底部，并将第一列保持在顶部。当我使用传统方法在父级中使用位置相对而在两列中使用绝对时，我会得到一种奇怪的行为，我想这是因为在twitter引导程序中有些东西。以下是发生的事情：

http://www.bootply.com/125735

绝对强迫所有列在彼此之上，任何人都可以帮助我吗？最终的结果就是这样：

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

由于

Answer 1

您可以在要对齐的2列上使用display：table-cell和vertical-align：bottom，如下所示：

.bottom-column
{
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

工作示例here。

此外，这可能是duplicate question。

Answer 2

垂直对齐底部并移除浮动似乎工作。然后我有一个保证金问题，但-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;
}

此处示例：http://www.bootply.com/125740#

Answer 3

使用bootsrap时，通常面临三个主要问题：

1. 如何将列的内容放在底部？
2. 如何在一个.row？
中创建一个高度相等的多列图库
3. 如果列的总宽度小于12且剩余宽度为奇数，如何水平居中列？

要解决前两个问题，请下载此小插件https://github.com/codekipple/conformity

第三个问题在http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

解决了

公共代码

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

1。将列的内容与底部对齐

<div class="row row-conformity">
    <div class="col-sm-3">
        I<br>create<br>highest<br>column
    </div>
    <div class="col-sm-3">
        <div class="to-bottom">
            I am on the bottom
        </div>
    </div>
</div>

2。相等高度的列的画廊

<div class="row row-conformity">
    <div class="col-sm-4">We all have equal height</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

3。列到中心的水平对齐（小于12个col单位）

<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>

所有课程都可以一起工作

<div class="row row-conformity row-centered">
    ...
</div>

Answer 4

我不知道为什么，但对我来说，Marius Stanescu提出的解决方案是打破col的特异性（col-md-3后面跟着col-md-4将占据所有12行）

我找到了另一个有效的解决方案：

.bottom-column 
{
   display: inline-block;
   vertical-align: middle;
   float: none;
}