如何在自举stream体布局中alignment网格元素
我有一个stream动的布局使用Twitter的引导，其中我有一个两列的行。 第一列有很多内容，我想正常填写这个跨度。 第二列只是一个button和一些文本，我想要相对于第一列中的单元格alignment。
这是我有：
-row-fluid------------------------------------- +-span6----------+ +-span6----------+ | | |short content | | content | +----------------+ | that | | is tall | | | +----------------+ ----------------------------------------------- 这是我想要的：
-row-fluid------------------------------------- +-span6----------+ | | | content | | that | | is tall | +-span6----------+ | | |short content | +----------------+ +----------------+ -----------------------------------------------
我已经看到了解决scheme，使第一跨度绝对高度，并定位第二跨度相对于它，但一个解决scheme，我不必指定我的div的绝对高度将是首选。 我也打算对如何达到同样的效果进行彻底的反思。 我没有结过这个脚手架的使用，这对我来说似乎是最有意义的。
这个布局作为小提琴：
http://jsfiddle.net/ryansturmer/A7buv/3/
请参阅http://jsfiddle.net/jhfrench/bAHfj/以获取工作解决scheme。;
//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()) });
从积极的一面：
- 本着Bootstrap现有的帮助类的精神，我命名了类
pull-down。 - 只有被“拉下来”的元素需要归类，所以…
- …它可以重复使用不同的元素types（div，span，section，p等）
- 它得到了很好的支持（所有的主stream浏览器都支持margin-top）
现在坏消息：
- 它需要jQuery
- 这不是，写作，响应（对不起）
这是Bootstrap 3的一个更新的解决scheme（应该适用于旧版本），只使用CSS / LESS：
http://jsfiddle.net/silb3r/0srp42pb/11/
你在行上设置字体大小为0（否则你最终会在列之间产生麻烦的空间），然后移除列浮动，将显示设置为inline-block ，重新设置它们的字体大小，然后vertical-align可以设置为任何你需要的。
不需要jQuery。
你需要为span6添加一些样式，如下所示：
.row-fluid .span6 { display: table-cell; vertical-align: bottom; float: none; }
这是你的小提琴： http : //jsfiddle.net/sgB3T/
你可以使用flex：
@media (min-width: 768px) { .row-fluid { display: flex; align-items: flex-end; } }
这里还有一个angularjs指令来实现这个function
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); } }; }
基于其他答案这里是一个更响应的版本。 我对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);
这是基于cfx的解决scheme，但不是在父容器中设置字体大小为零，以删除由于display：inline-block而添加的列间空间，并且不得不重置它们，我只是添加
.row.row-align-bottom > div { float: none; display: inline-block; vertical-align: bottom; margin-right: -0.25em; }
只要设置父级display:flex; 和孩子到margin-top:auto 。 这将把子元素放置在父元素的底部，假定父元素的高度大于子元素的高度。
当您的父元素或另一个元素的高度大于您父元素中您感兴趣的子元素的高度时，不需要尝试计算margin-top的值。
那么，我不喜欢任何这些答案，同样的问题的解决scheme是添加这个： <div> </div> 。 所以在你的scheme中，它会看起来像这样（或多或less），在我的情况下不需要更改样式：
-row-fluid------------------------------------- +-span6----------+ +----span6----------+ | | | +---div---+ | | content | | | & nbsp; | | | that | | +---------+ | | is tall | | +-----div--------+| | | | |short content || | | | +----------------+| +----------------+ +-------------------+ -----------------------------------------------
.align-bottom { position: absolute; bottom: 10px; right: 10px; }
