如何在 Bootstrap 3 中指定行高？答案

【问题标题】：How do I specify row height in Bootstrap 3?如何在 Bootstrap 3 中指定行高？
【发布时间】：2014-03-01 23:24:40
【问题描述】：

使用 Bootstrap 3，我将 .row 类的样式设置为 3.5em 的高度。我在行中有几个输入。它们对齐到行的顶部，我想让它们底部对齐。

我尝试了一种 vertical-align:bottom 样式，但这似乎不起作用。我想让事物底部对齐的原因是我在输入字段上方弹出了一个浮动标签。

关于如何完成底部对齐的任何建议？

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

编辑

也许我误解了你想要做什么。

如果要垂直对齐行的内容，可以使用该解决方案：

.row-bottom-align {
    display: table;
    table-layout: fixed;
}

.row-bottom-align > div {
    display: table-cell;
    float: none;
    vertical-align: bottom;
}

并将 row-bottom-align 添加到您的行。

查看实际操作：http://jsfiddle.net/G5e3e/

======

原始答案

这是使列具有相同高度的一种方法。

（您也可以通过将垂直对齐设置为“顶部”来使用上述解决方案进行相同的渲染，但这是使用边距/填充的另一种方法）

.row-same-height {
    overflow: hidden;
}

.row-same-height > div {
    margin-bottom: -2000px !important;
    padding-bottom: 2000px !important;
}

只需将 row-same-height 类添加到您的行

<div class="row row-same-height"></div>

看看实际情况：http://jsfiddle.net/Cxa2m/

【讨论】：

您提供的更新解决方案有效，但它消除了 Bootstrap 的大部分“响应式”特性。
“display:table-cell”css 破坏了响应能力。
是的，但是只有当列在同一行时，垂直对齐才有意义。所以你可以在 xs-size 上禁用它：@media (min-width: 768px) { above css code }
我忘记了媒体查询。现在更有意义了。谢谢