如何在Bootstrap 3中指定行高？

使用引導程序3我已將.row類設置爲3.5em的高度。我在該行有幾個輸入。他們對齊行的頂部，我想讓他們底部對齊。如何在Bootstrap 3中指定行高？

我試過垂直對齊：底部的樣式，但似乎沒有工作。我希望事物底部對齊的原因是我有一個浮動標籤，我已經彈出輸入字段。

有關如何完成底部對齊的任何建議？

2014-03-01 John S

編輯

也許我誤解了你想做的事情。

如果要垂直對齊你行的內容，您可以使用該解決方案：

.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/

來源

2014-03-02 00:39:38 Seb33300

更新的解決方案，您現在的作品，但它消除了很多的引導的「有求必應」的性質。 –

「display：table-cell」css會破壞響應能力。 –

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

如何在Bootstrap 3中指定行高？

回答

相關問題