twitter-bootstrap 如何在引导程序中将按钮与行/列的底部对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23943457/
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 align the button to the bottom of the row/column in bootstrap?
提问by Sheldon
I have row with 4 columns each with a heading and some text. Most of the columns have a similar amount of text and push the button in their column down to match the rest of the columns. However one column has less text and doesn't push the button down far enough.
我有 4 列的行，每列都有一个标题和一些文本。大多数列具有相似数量的文本并按下其列中的按钮以匹配其余列。但是，一列的文本较少，并且按钮按下得不够远。
Is there a way to align the button to the bottom of the row? I would like to achieve this and keep it responsive at the same time so it looks like this when the screen is smaller:
有没有办法将按钮与行的底部对齐？我想实现这一点并同时保持响应，因此当屏幕较小时它看起来像这样：
This is my markup of the page just now:
这是我刚才对页面的标记：
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Heading</h2>
<p>text here</p>
<p><a class="btn btn-default" href="#" role="button">View details >></a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>text here</p>
<p><a class="btn btn-default" href="#" role="button">View details >></a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>less text here</p>
<p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>text here</p>
<p><a class="btn btn-default" href="#" role="button">View details >></a></p>
</div>
</div>
</div>
采纳答案by Tims
There are several ways this can be done:
有几种方法可以做到这一点：
Give the containers a fixed height. This is not ideal as in order for it to look nice you will have to set different heights for each of the breakpoints.
You will also need to set the button toposition: absolute,bottom: 0and add some bottom padding/margin.Use some javascript to match the heights using something like match height. You will also need to set the positions as in the previous point.
Add an additional row and repeat your buttons within 4 new cols. Then show or hide your original buttons and the new ones using bootstraps responsive classes.
给容器一个固定的高度。这并不理想，因为为了让它看起来不错，您必须为每个断点设置不同的高度。
您还需要将按钮设置为position: absolute，bottom: 0并添加一些底部填充/边距。使用一些 javascript 使用match height 之类的东西来匹配高度。您还需要像上一点一样设置位置。
添加额外的一行并在 4 个新列内重复您的按钮。然后使用引导响应类显示或隐藏您的原始按钮和新按钮。
回答by A.B
set min-height equals to something to the text containing div for example
将 min-height 设置为等于包含 div 的文本的值，例如
.col-md-3{min-height:300px;}
回答by Abe Hendlish
Set an explicit height on col-md-3.
在 col-md-3 上设置明确的高度。
