Html Bootstrap 3 - 行内底部对齐列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21630413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Bottom align column within row
提问by RationalGeek
I have two Bootstrap columns within a row, thusly:
我在一行中有两个 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>
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/
这是一个演示小提琴：http:
//jsfiddle.net/RationalGeek/6pYhx/
回答by Xareyo
Try using position: absolute;and setting a bottomof 0:
尝试使用position: absolute;和设置 a bottomof 0：
.row {
position: relative;
}
.mainBox {
border: solid thin black;
}
.buttonBox {
position: absolute;
bottom:0;
right:0;
}
回答by mkralla11
Although absolute position is a quick fix, a more robust solution that works with many columns would be much better.
尽管绝对位置是一个快速解决方案，但适用于许多列的更强大的解决方案会更好。
Here is my solution in this updated fiddle.
这是我在这个更新的小提琴中的解决方案。
[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;
}
and html:
和 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>
There are a couple of things to note in my solution. The inline-block strategy used allows positioning of the div columns to stay in the flow of the document, while also allowing the use of vertical-align styling. I've included a style for bottom alignment and middle alignment for you convenience (I tend to use the middle alignment just as often).
在我的解决方案中有几件事情需要注意。使用的内联块策略允许将 div 列定位在文档流中，同时还允许使用垂直对齐样式。为了方便起见，我已经包含了底部对齐和中间对齐的样式（我倾向于经常使用中间对齐）。
The second thing to note is you musthave each of the respective ending-column </div>and starting-column <div>meet with nospace in between. This is because inline-block gives 'space' to any character (including a space character). Essentially, it is because a space character has a given font-size, which ends up pushing the respective right most columns underneath the left most columns. There are hacks to overcome this, but they are notecross-browser compatible, so I did not include them. Therefore, my solution is hack-free, and works with multiple columns. Enjoy!
要注意的第二件事是您必须让每个相应的结束列</div>和开始列<div>相交，中间没有空格。这是因为 inline-block 为任何字符（包括空格字符）提供了“空格”。本质上，这是因为空格字符具有给定的字体大小，最终将最右侧的列推到最左侧的列下方。有黑客要克服这一点，但他们注意到跨浏览器兼容，所以我没有包括他们。因此，我的解决方案是无黑客的，并且适用于多个列。享受！
回答by end-user
I know I'm posting on a veryold thread, but I've been searching for solutions to the same issue. I thinka simple solution may be to use display: flex;on the row, and margin-top: auto;on the column you want pushed down. Here's a demo fiddlebased on the OP.
我知道我在一个很老的帖子上发帖，但我一直在寻找同一问题的解决方案。我认为一个简单的解决方案可能是display: flex;在行margin-top: auto;上使用，并在您想要下推的列上使用。这是一个基于 OP的演示小提琴。
*Please note* - this is altering the rowclass which could have unintended side effects. You may want to implement it in a new class and only apply where needed.
*请注意* - 这正在改变row可能会产生意想不到的副作用的课程。您可能希望在一个新类中实现它，并且只在需要的地方应用。
回答by Joakim Poromaa Helger
Building on Mike's solution, here's one that does not care about spaces between divs. Instead of inline it uses display:table and display:cell.
基于 Mike 的解决方案，这里有一个不关心 div 之间的空间的解决方案。它使用 display:table 和 display:cell 代替内联。
[class*='cols-'] {
display:table;
}
[class*='cols-'] > * {
float: none;
position: relative;
/* old ie fixes */
*zoom: 1;
*display: inline;
display: table-cell;
}
.cols-bottom > * {
vertical-align: bottom;
}
.cols-top > * {
vertical-align: top;
}
//extra bonus if needed
.p-top {
vertical-align: top;
}
plunker updated: http://jsfiddle.net/6pYhx/325/
plunker 更新：http: //jsfiddle.net/6pYhx/325/
回答by Robert Waddell
Building on solutions from Mike and JPH, this allows for col-12 behavior to be retained. It isn't perfect and a bit verbose in plain CSS, but works.
基于 Mike 和 JPH 的解决方案，这允许保留 col-12 行为。它在普通 CSS 中并不完美，而且有点冗长，但有效。
/* Vertical Align Columns */
[class*='cols-'] {
display:table;
}
.cols-bottom > * {
vertical-align: bottom;
}
.cols-middle > * {
vertical-align: middle;
}
.cols-top > * {
vertical-align: top;
}
/* Resets for col-12 classes */
@media (min-width: 1200px) {
[class*='cols-'] > *:not(.col-lg-12) {
float: none;
position: relative;
/* old ie fixes */
*zoom: 1;
*display: inline;
display: table-cell;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
[class*='cols-'] > *:not(.col-lg-12):not(.col-md-12) {
float: none;
position: relative;
/* old ie fixes */
*zoom: 1;
*display: inline;
display: table-cell;
}
}
@media (min-width: 768px) and (max-width: 991px) {
[class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12) {
float: none;
position: relative;
/* old ie fixes */
*zoom: 1;
*display: inline;
display: table-cell;
}
}
@media (max-width: 767px) {
[class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12):not(.col-xs-12) {
float: none;
position: relative;
/* old ie fixes */
*zoom: 1;
*display: inline;
display: table-cell;
}
}
回答by Mayra Lozano
Here is another working example
http://jsfiddle.net/RationalGeek/6pYhx/
这是另一个工作示例
http://jsfiddle.net/RationalGeek/6pYhx/
<div class="row row-eq-height"></div>
The Css:
Css：
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.mainBox {
border: solid thin black;
}
.buttonBox {
vertical-align:center;
margin-top: auto;
margin-bottom: auto;
}
