如何在Bootstrap 3中指定行高？

问题描述：

使用引导程序3我已将.row类设置为3.5em的高度。我在该行有几个输入。他们对齐行的顶部，我想让他们底部对齐。如何在Bootstrap 3中指定行高？

我试过垂直对齐：底部的样式，但似乎没有工作。我希望事物底部对齐的原因是我有一个浮动标签，我已经弹出输入字段。

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

答

编辑

也许我误解了你想做的事情。

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

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

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

并添加行底部对齐你行。

看到它在行动：http://jsfiddle.net/G5e3e/

======

原来的答案

这里是一个办法让你的列有相同的高度。

（你也可以通过设置垂直对齐到“顶”与上述解决方案相同的渲染，但这里是另一种方式来做到这一点与保证金/填充）

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

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

只需添加行相同-height类的行

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

看看它在行动：http://jsfiddle.net/Cxa2m/

更新的解决方案，您现在的作品，但它消除了很多的引导的“有求必应”的性质。 –

“display：table-cell”css会破坏响应能力。 –

是的，但只有列在同一行上时，垂直对齐才有意义。所以你可以禁用它，例如在xs大小上：'@media（min-width：768px）{above css code}' – Seb33300

如何在Bootstrap 3中指定行高？

相关推荐