使用Bootstrap,是否有一种优雅的方式可以让每个行中的表单的所有标签都具有相同的高度,以便输入的底部彼此对齐?所有具有相同高度的标签,每行
请看看这个JSFiddle
。
我想那是什么第二个标签的高度“相同的高度离开”左边是相同的高度标签。或者,如果右侧的输入与另一个输入的底部对齐,那也是可行的。
使用Bootstrap,是否有一种优雅的方式可以让每个行中的表单的所有标签都具有相同的高度,以便输入的底部彼此对齐?所有具有相同高度的标签,每行
请看看这个JSFiddle
。
我想那是什么第二个标签的高度“相同的高度离开”左边是相同的高度标签。或者,如果右侧的输入与另一个输入的底部对齐,那也是可行的。
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="total_contribution_months">A very large and long label for an input</label>
</div>
<div class="col-xs-6">
<label class="control-label" for="age">Same height as left</label>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input id="total_contribution_months" class="form-control" type="text">
</div>
<div class="col-xs-6">
<input id="age" class="form-control">
</div>
</div>
</div>
我们通常不会通过把所有标签成一排牺牲响应。
解决方法:为您的标签添加一个任意高度,然后将所有标签文本推到底部。
label {
height: 40px;
vertical-align: bottom;
display: table-cell;
padding-bottom: 5px;
}
普莱舍注vertical-align
是有效的,只有当display: table-cell;
。
哦,我明白了。谢谢。 但是在将标签放在一行中以及在其他行中放置相应的控件时是否存在任何缺陷? – pedropais
哦,这打破了任何响应,因为现在一个标签跟着另一个:/ – pedropais
我认为没有缺点,导致标签和输入与forother和id属性链接。 解释你的反应意义,似乎evrthg确定:) – userlond