Html 如何在引导流体布局中底部对齐网格元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13841387/
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
How do I bottom-align grid elements in bootstrap fluid layout
提问by Ryan
I have a fluid layout using Twitter's bootstrap, wherein I have a row with two columns. The first column has a lot of content, which I want to fill the span normally. The second column just has a button and some text, which I want to bottom align relative to the cell in the first column.
我有一个使用 Twitter 引导程序的流畅布局，其中我有一排两列。第一列内容很多，我想正常填满span。第二列只有一个按钮和一些文本，我想相对于第一列中的单元格底部对齐。
Here's what I have:
这是我所拥有的：
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall |
| |
+----------------+
-----------------------------------------------
Here's what I want:
这是我想要的：
-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that |
| is tall | +-span6----------+
| | |short content |
+----------------+ +----------------+
-----------------------------------------------
I've seen solutions that make the first span an absolute height, and position the second span relative to it, but a solution where I didn't have to specify the absolute height of my divs would be preferred. I'm also open to a complete rethink of how to achieve the same effect. I'm not married to this use of the scaffolding, it just seemed to make the most sense to me.
我见过使第一个跨度成为绝对高度并将第二个跨度相对于它定位的解决方案，但是我不必指定我的 div 的绝对高度的解决方案将是首选。我也愿意完全重新考虑如何实现相同的效果。我不喜欢脚手架的这种使用，它对我来说似乎最有意义。
This layout as a fiddle:
这个布局就像一个小提琴：
采纳答案by Jeromy French
Please note: for Bootstrap 4+ users, please consider Christophe's solution(Bootstrap 4 introduced flexbox, which provides for a more elegant CSS-only solution). The following will work for earlier versions of Bootstrap...
请注意：对于 Bootstrap 4+ 用户，请考虑Christophe 的解决方案（Bootstrap 4 引入了 flexbox，它提供了一个更优雅的 CSS-only 解决方案）。以下内容适用于早期版本的 Bootstrap...
See http://jsfiddle.net/jhfrench/bAHfj/for a working solution.
有关工作解决方案，请参阅http://jsfiddle.net/jhfrench/bAHfj/。
//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
var $this = $(this);
$this.css('margin-top', $this.parent().height() - $this.height())
});
On the plus side:
从积极的一面：
- in the spirit of Bootstrap's existing helper classes, I named the class
pull-down. - only the element that is getting "pulled down" needs to be classed, so...
- ...it's reusable for different element types (div, span, section, p, etc)
- it's fairly-well supported (all the major browsers support margin-top)
- 本着Bootstrap 现有辅助类的精神，我将类命名为
pull-down. - 只有被“拉下”的元素需要分类，所以......
- ...它可重用于不同的元素类型（div、span、section、p 等）
- 它得到了很好的支持（所有主要浏览器都支持 margin-top）
Now the bad news:
现在坏消息是：
- it requires jQuery
- it's not, as-written, responsive (sorry)
- 它需要jQuery
- 它不是，如所写的，响应式（抱歉）
回答by cfx
This is an updated solution for Bootstrap 3 (should work for older versions though) that uses CSS/LESS only:
这是 Bootstrap 3 的更新解决方案（尽管应该适用于旧版本），它仅使用 CSS/LESS：
http://jsfiddle.net/silb3r/0srp42pb/11/
http://jsfiddle.net/silb3r/0srp42pb/11/
You set the font-size to 0 on the row (otherwise you'll end up with a pesky space between columns), then remove the column floats, set display to inline-block, re-set their font-size, and then vertical-aligncan be set to anything you need.
您在行上将 font-size 设置为 0（否则最终会在列之间出现令人讨厌的空间），然后删除列浮动，将 display 设置为inline-block，重新设置它们的 font-size，然后vertical-align可以设置为你需要的任何东西。
No jQuery required.
不需要jQuery。
回答by Christophe
You can use flex:
您可以使用弹性：
@media (min-width: 768px) {
.row-fluid {
display: flex;
align-items: flex-end;
}
}
回答by Lukas
You need to add some style for span6, smthg like that:
您需要为span6, smthg添加一些样式，如下所示：
.row-fluid .span6 {
display: table-cell;
vertical-align: bottom;
float: none;
}
and this is your fiddle: http://jsfiddle.net/sgB3T/
这是你的小提琴：http: //jsfiddle.net/sgB3T/
回答by Ilya Schukin
Here's also an angularjs directive to implement this functionality
这里还有一个 angularjs 指令来实现这个功能
pullDown: function() {
return {
restrict: 'A',
link: function ($scope, iElement, iAttrs) {
var $parent = iElement.parent();
var $parentHeight = $parent.height();
var height = iElement.height();
iElement.css('margin-top', $parentHeight - height);
}
};
}
回答by sissypants
Just set the parent to display:flex;and the child to margin-top:auto. This will place the child content at the bottom of the parent element, assuming the parent element has a height greater than the child element.
只需将父设置为display:flex;，将子设置为margin-top:auto。这会将子内容放置在父元素的底部，假设父元素的高度大于子元素。
There is no need to try and calculate a value for margin-topwhen you have a height on your parent element or another element greater than your child element of interest within your parent element.
margin-top当您的父元素或另一个元素的高度大于您在父元素中感兴趣的子元素时，无需尝试计算值。
回答by bbodenmiller
Based on the other answers here is an even more responsive version. I made changes from Ivan's version to support viewports <768px wide and to better support slow window resizes.
基于这里的其他答案，这是一个响应速度更快的版本。我对 Ivan 的版本进行了更改，以支持 <768px 宽的视口并更好地支持慢速窗口调整大小。
!function ($) { //ensure $ always references jQuery
$(function () { //when dom has finished loading
//make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
function fixHeader() {
//for each element that is classed as 'pull-down'
//reset margin-top for all pull down items
$('.pull-down').each(function () {
$(this).css('margin-top', 0);
});
//set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function () {
if ($(window).innerWidth() >= 768) {
$(this).css('margin-top', $(this).parent().height() - $(this).height());
}
});
}
$(window).resize(function () {
fixHeader();
});
fixHeader();
});
}(window.jQuery);
回答by Kirtlander
This is based on cfx's solution, but rather than setting the font size to zero in the parent container to remove the inter-column spaces added because of the display: inline-block and having to reset them, I simply added
这是基于 cfx 的解决方案，而不是在父容器中将字体大小设置为零以删除由于 display: inline-block 而添加的列间空间，并且必须重置它们，我只是添加了
.row.row-align-bottom > div {
float: none;
display: inline-block;
vertical-align: bottom;
margin-right: -0.25em;
}to the column divs to compensate.
到列 div 进行补偿。
回答by jan b
Well, I didn't like any of those answers, my solution of the same problem was to add this:<div> </div>. So in your scheme it would look like this (more or less), no style changes were necessary in my case:
好吧，我不喜欢任何这些问题的答案，我的同样的问题的解决办法是补充一点：<div> </div>。因此，在您的方案中，它看起来像这样（或多或少），在我的情况下不需要更改样式：
-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
| | | +---div---+ |
| content | | | & nbsp; | |
| that | | +---------+ |
| is tall | | +-----div--------+|
| | | |short content ||
| | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
回答by Douglas Ribeiro
.align-bottom {
position: absolute;
bottom: 10px;
right: 10px;
}
