blocks|key|202209|text|你需要为span6添加一些样式，就像这样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|202210|.row-fluid+.span6+{
++display:+table-cell;
++vertical-align:+bottom;
++float:+none;
}|code-block|syntax|javascript|202211|这是你的小提琴：http://jsfiddle.net/sgB3T/|202212|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sgB3T/^0|4|5|0|0|8|Q|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You need to add some style for <code>span6</code>, smthg like that:

<pre><code>.row-fluid .span6 {
 display: table-cell;
 vertical-align: bottom;
 float: none;
}
</code></pre>

and this is your fiddle: <a href="http://jsfiddle.net/sgB3T/" rel="noreferrer">http://jsfiddle.net/sgB3T/</a>

blocks|key|2838961|text|请注意：对于Bootstrap+4%2B用户，请考虑++(Bootstrap+4引入的flexbox，它提供了一个更优雅的CSS-only解决方案)。以下内容适用于较早版本的Bootstrap...|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2838962|2838963|有关有效的解决方案，请参阅http://jsfiddle.net/jhfrench/bAHfj/。|2838964|//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())
});|code-block|syntax|javascript|2838965|好的一面是：|2838966|按照页边距的精神，我将这个类命名为pull-down.|CODE|2838967|only需要对“下拉”的元素进行分类，so...|unordered-list-item|2838968|
|2838969|...it's可重用于不同的元素类型(div、、|2838970|、p等)|2838971|它得到了很好的支持(所有主流浏览器都支持|2838972|-)|2838973|2838974|2838975|2838976|现在坏消息是：|2838977|2838978|it需要jQuery|2838979|it+it，as-written，responsive+(抱歉)|2838980|2838981|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jhfrench/bAHfj/^0|4|K|0|0|D|Z|0|0|0|0|H|9|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]|$1|G|3|H|5|6|7|1S|8|@]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|I|3|J|5|K|7|1W|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1X|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1Y|8|@$9|1Z|A|20|B|R]]|D|@]|E|$]]|$1|S|3|T|5|U|7|21|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|22|8|@]|D|@]|E|$]]|$1|X|3|Y|5|U|7|23|8|@]|D|@]|E|$]]|$1|Z|3|10|5|U|7|24|8|@]|D|@]|E|$]]|$1|11|3|12|5|U|7|25|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|26|8|@]|D|@]|E|$]]|$1|15|3|W|5|6|7|27|8|@]|D|@]|E|$]]|$1|16|3|-4|5|U|7|28|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|29|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|2A|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|U|7|2C|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|U|7|2D|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|1G|3|-4|5|6|7|2F|8|@]|D|@]|E|$]]]|1H|$1I|$5|1J|1K|1L|E|$1M|1N]]]]

Please note: for Bootstrap 4+ users, please consider <a href="https://stackoverflow.com/a/34982317/1430996">Christophe's solution</a> (Bootstrap 4 introduced flexbox, which provides for a more elegant CSS-only solution). The following will work for earlier versions of Bootstrap...

<hr>

See <a href="http://jsfiddle.net/jhfrench/bAHfj/" rel="nofollow noreferrer">http://jsfiddle.net/jhfrench/bAHfj/</a> for a working solution.

<pre><code>//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())
});
</code></pre>

On the plus side:

<ul>
<li>in the spirit of <a href="http://getbootstrap.com/2.3.2/components.html#misc" rel="nofollow noreferrer">Bootstrap's existing helper classes</a>, I named the class <code>pull-down</code>.</li>
<li>only the element that is getting "pulled down" needs to be classed, so...</li>
<li>...it's reusable for different element types (div, span, section, p, etc)</li>
<li>it's fairly-well supported (all the major browsers support margin-top)</li>
</ul>

Now the bad news:

<ul>
<li>it requires jQuery</li>
<li>it's not, as-written, responsive (sorry)</li>
</ul>

blocks|key|205031|text|基于其他答案，这里是一个响应更快的版本。我对Ivan的版本进行了更改，以支持<768px宽的视区，并更好地支持慢速窗口大小调整。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205032|!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);|code-block|syntax|javascript|205033|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Based on the other answers here is an even more responsive version. I made changes from Ivan's version to support viewports &lt;768px wide and to better support slow window resizes.

<pre><code>!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() &gt;= 768) {
 $(this).css('margin-top', $(this).parent().height() - $(this).height());
 }
 });
 }

 $(window).resize(function () {
 fixHeader();
 });

 fixHeader();
 });
}(window.jQuery);
</code></pre>

blocks|key|204665|text|下面还有一个实现此功能的angularjs指令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204666|++++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);
++++++++}
++++++};
++++}|code-block|syntax|javascript|204667|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's also an angularjs directive to implement this functionality 

<pre><code> 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);
 }
 };
 }
</code></pre>

blocks|key|202311|text|这是Bootstrap+3的更新解决方案(不过应该适用于旧版本)，它只使用CSS/LESS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|202312|http://jsfiddle.net/silb3r/0srp42pb/11/|offset|length|202313|将行上的font-size设置为0(否则将导致列之间出现讨厌的空格)，然后删除列浮动，将display设置为inline-block，重新设置它们的font-size，然后可以将vertical-align设置为所需的任何值。|style|CODE|202314|不需要jQuery。|202315|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0|1I|C|2H|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|6|7|X|8|@$D|Y|E|Z|H|I]|$D|10|E|11|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|C]]]]

This is an updated solution for Bootstrap 3 (should work for older versions though) that uses CSS/LESS only:

<a href="http://jsfiddle.net/silb3r/0srp42pb/11/">http://jsfiddle.net/silb3r/0srp42pb/11/</a>

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 <code>inline-block</code>, re-set their font-size, and then <code>vertical-align</code> can be set to anything you need.

No jQuery required.

blocks|key|205106|text|好吧，我不喜欢这些答案中的任何一个，我对同样问题的解决方案是添加这个：<div>&nbsp;</div>。所以在你的方案中，它看起来像这样(或多或少)，在我的例子中没有必要改变样式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|205107|-row-fluid-------------------------------------
%2B-span6----------%2B+%2B----span6----------%2B
%7C++++++++++++++++%7C+%7C+%2B---div---%2B+++++++%7C
%7C+content++++++++%7C+%7C+%7C+&+nbsp;+%7C+++++++%7C
%7C+that+++++++++++%7C+%7C+%2B---------%2B+++++++%7C
%7C+is+tall++++++++%7C+%7C+%2B-----div--------%2B%7C+++
%7C++++++++++++++++%7C+%7C+%7Cshort+content+++%7C%7C
%7C++++++++++++++++%7C+%7C+%2B----------------%2B%7C
%2B----------------%2B+%2B-------------------%2B
-----------------------------------------------|code-block|syntax|javascript|205108|entityMap^0|Z|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Well, I didn't like any of those answers, my solution of the same problem was to add this:<code>&lt;div&gt;&amp;nbsp;&lt;/div&gt;</code>. So in your scheme it would look like this (more or less), no style changes were necessary in my case:

<pre><code>-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
| | | +---div---+ |
| content | | | &amp; nbsp; | |
| that | | +---------+ |
| is tall | | +-----div--------+| 
| | | |short content ||
| | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
</code></pre>

blocks|key|2839139|text|您可以使用flex：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2839140|@media+(min-width:+768px)+{
++.row-fluid+{
++++display:+flex;
++++align-items:+flex-end;
++}
}|code-block|syntax|javascript|2839141|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use flex:

<pre><code>@media (min-width: 768px) {
 .row-fluid {
 display: flex;
 align-items: flex-end;
 }
}
</code></pre>

blocks|key|2839160|text|这是基于cfx的解决方案，而不是在父容器中将字体大小设置为0来删除因display:+inline-block而添加的列间空格，我只是添加了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2839161|​|2839162|.row.row-align-bottom+>+div+{
++++float:+none;
++++display:+inline-block;
++++vertical-align:+bottom;
++++margin-right:+-0.25em;
}|code-block|syntax|javascript|2839163|2839164|添加到列div以进行补偿。|2839165|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

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 

<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row.row-align-bottom &gt; div {
 float: none;
 display: inline-block;
 vertical-align: bottom;
 margin-right: -0.25em;
}</code></pre>
</div>
</div>


to the column divs to compensate.

blocks|key|205122|text|.align-bottom+{
++++position:+absolute;
++++bottom:+10px;
++++right:+10px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|205123|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.align-bottom {
 position: absolute;
 bottom: 10px;
 right: 10px;
}
</code></pre>

blocks|key|2839178|text|只需将父对象设置为display:flex;，将子对象设置为margin-top:auto即可。这会将子内容放在父元素的底部，假设父元素的高度大于子元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2839179|如果父元素或其他元素的高度大于父元素中感兴趣的子元素的高度，则无需尝试计算margin-top的值。|2839180|entityMap^0|9|D|U|F|0|11|A|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Just set the parent to <code>display:flex;</code> and the child to <code>margin-top:auto</code>. 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.

There is no need to try and calculate a value for <code>margin-top</code> when you have a height on your parent element or another element greater than your child element of interest within your parent element.

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. 

Here's what I have:

<pre><code>-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that | 
| is tall | 
| |
+----------------+
-----------------------------------------------
</code></pre>

Here's what I want:

<pre><code>-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that | 
| is tall | +-span6----------+ 
| | |short content |
+----------------+ +----------------+
-----------------------------------------------
</code></pre>

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.

This layout as a fiddle:

<a href="http://jsfiddle.net/ryansturmer/A7buv/3/">http://jsfiddle.net/ryansturmer/A7buv/3/</a>

How do I bottom-align grid elements in bootstrap fluid layout

容器

jQuery

我有一个使用Twitter的bootstrap的流畅布局，其中我有一行和两列。第一列有很多内容，我想正常填充跨度。第二列只有一个按钮和一些文本，我希望它们相对于第一列中的单元格进行底部对齐。这就是我所拥有的：-row-fluid-------------------------------------+-span6--...

问如何在bootstrap fluid布局中底对齐网格元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在bootstrap fluid布局中底对齐网格元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在bootstrap fluid布局中底对齐网格元素
EN