Bootstrap 3 - 行内的底部对齐列 [英] Bootstrap 3 - Bottom align column within row

问题描述

我在一行中有两个Bootstrap列，因此：

 < div class =row> 
< div class =col-xs-6 mainBox> 
< h1>标题< / h1> 
< h2>副标题< / h2> 
< / div> 
< div class =col-xs-6 mainBox buttonBox> 
< button class =btn btn-primary>按钮< /按钮> 
< / div> 
< / div> 
  

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

这是一个演示小提琴：

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

解决方案

尝试使用 position：absolute; 并设置底部 0 ：

  .row {
 position：relative; 
} 
 .mainBox {
 border：实心薄的黑色; 
} 
 .buttonBox {
 position：absolute; 
 bottom：0; 
 right：0; 
} 
  

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

I have two Bootstrap columns within a row, thusly:

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

I want the second column to be bottom aligned vertically within the row. How do I achieve this?

Here is a demo fiddle:
http://jsfiddle.net/RationalGeek/6pYhx/

解决方案

Try using position: absolute; and setting a bottom of 0:

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

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

这篇关于Bootstrap 3 - 行内的底部对齐列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！