Bootstrap 3 - 行内的底部对齐列

Question

我连续有两个Bootstrap列,因此:

<div class="row">
    <div class="col-xs-6 mainBox">
        <h1>Heading</h1>
        <h2>Sub Heading</h2>
    </div>
    <div class="col-xs-6 mainBox buttonBox">
        <button class="btn btn-primary">Button</button>
    </div>
</div>

我希望第二列在行内垂直对齐.我该如何实现这一目标？

这是一个演示小提琴:http:
//jsfiddle.net/RationalGeek/6pYhx/

Answer 1

尝试使用position: absolute;和设置bottom的0:

.row {
    position: relative;
}
.mainBox {
    border: solid thin black;
}    
.buttonBox {
    position: absolute;
    bottom:0;
    right:0;
}

http://jsfiddle.net/6pYhx/3/

Answer 2

虽然绝对位置是一个快速解决方案,但是一个更强大的解决方案适用于许多列会更好.

这是我在这个更新的小提琴中的解决方案.

[class*='cols-'].row > *{
  float: none;
  position: relative;
  display: inline-block; 
  /* old ie fixes */
  *zoom: 1; 
  *display: inline;
}

.row.cols-bottom > *{
  vertical-align: bottom;
}

.row.cols-middle > *{
  vertical-align: middle;
}

和HTML:

<div class="row cols-bottom">
    <div class="col-xs-4">
        <h3>Heading</h3>
        <h4>Sub Heading</h4>
    <!-- The lack of space between div tags below does MATTER -->
    </div><div class="col-xs-4">
        <button class="btn btn-primary">Button </button>
    <!-- The lack of space between div tags below does MATTER -->
    </div><div class='col-xs-4'>
        This col should be 3
    </div>
</div>

我的解决方案中有几点需要注意.使用的内联块策略允许将div列定位以保留在文档的流中,同时还允许使用垂直对齐样式.为了方便起见,我已经为底部对齐和中间对齐添加了一种样式(我倾向于经常使用中间对齐).

第二点需要注意的是,您必须让每个相应的结束列</div>和起始列<div>相遇,中间没有空格.这是因为内联块为任何字符(包括空格字符)提供"空间".本质上,这是因为空格字符具有给定的字体大小,最终会推动最左侧列下方的相应最右侧列.有黑客要克服这一点,但他们注意到跨浏览器兼容,所以我没有包括他们.因此,我的解决方案是无黑客的,并且可以使用多个列.请享用!