如何在Bootstrap 3中指定行高度？ [英] How do I specify row height in Bootstrap 3?

问题描述

使用Bootstrap 3我将.row类的样式设置为3.5em的高度。
在行中有几个输入。

我尝试了一个垂直对齐的样式：bottom，但似乎没有工作。
我想让事情底部对齐的原因是我有一个浮动标签，我突然在输入字段上面。

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

解决方案

EDIT

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

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

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

======

ORIGINAL ANSWER

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

（您也可以使用上面的解决方案，通过设置垂直对齐到顶部，但这里是另一种方法来做边缘/填充）

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

Using Bootstrap 3 I have styled the .row class to be a height of 3.5em. I have several inputs in the row. They align to the top of the row and I would like to get them bottom aligned.

I have tried a style of vertical-align:bottom but that does not seem to work. The reason I want to have things bottom aligned is that I have a floating label that I have popping up above the input field.

Any suggestion on how to accomplish a bottom align?

解决方案

EDIT

Maybe i misunderstood what your want to do.

If you want to vertical align the content of your row, you can use that solution :

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

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

And add row-bottom-align to your row.

See it in action : http://jsfiddle.net/G5e3e/

======

ORIGINAL ANSWER

Here is a way to have your columns with the same height.

(you can also have the same render with the above solution by setting vertical align to "top", but here is another way to do that with margin/padding)

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

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

Just add row-same-height class to your row

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

Look it in action : http://jsfiddle.net/Cxa2m/

这篇关于如何在Bootstrap 3中指定行高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！