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;
}

这里的工作示例.

此外,这可能是一个可能重复的问题.

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#