Bootstrap 3按钮/文本框垂直对齐,不带标签
问题描述:
使用引导3,如何垂直对齐并在底部没有标签时放置按钮?Bootstrap 3按钮/文本框垂直对齐,不带标签
像这样的情况:
<div class="container">
<div class="row">
<div class="col-xs-3">
<label class="control-label">Field 1</label>
<input type="text" class="form-control">
</div>
<div class="col-xs-3 ">
<div class="text-center">
<button class="btn btn-primary">Swap!</button>
</div>
</div>
<div class="col-xs-3">
<label class="control-label">Field 2</label>
<input type="text" class="form-control">
</div>
</div>
</div>
我主要使用三种解决方案:
- 使用2行(一个用于标签和一个文本框和按钮)像https://jsfiddle.net/luancaius/7ygoys11/。此解决方案无法响应,并会产生一些布局问题。
- 在中间栏使用margin-top。也有响应的问题。
- 使用非破坏空间的标签可以解决问题,但看起来不太好。这是我目前的解决方案。 https://jsfiddle.net/luancaius/mr5wLoxf/
有没有人有更好的方法来解决这个问题?或者我在做布局结构错误?
谢谢!
答
你可以尝试用垂直对齐排列:
.col-xs-3 {display:inline-block; vertical-align:bottom; float:none;}
只要确保有在各山坳-XS-3的div的HTML没有空格。或者使用注释来划分他们,就像这样:
<div>...</div><!-- space --><div>...</div>
https://jsfiddle.net/yw0a6689/
UPDATE:而是做这行每列的,你可以做到这一点通常是这样的:
.container > .row > div {display:inline-block; vertical-align:bottom; float:none;}
或者更具体地说,通过给该行添加一个类似.myrow的类,然后声明:
.myrow > div {display:inline-block; vertical-align:bottom; float:none;}
+0
但我需要为每种类型的引导列做这个。像col-xs-1,col-xs-2,col-sm-3 ...? –
+0
我更新了答案 –
您的第一个解决方案似乎适合用途。那么它怎么回应,你有什么样的布局问题呢? –
如果您调整布局大小,则应该在字段和单个字段之上标注标签。使用第一种解决方案,您可以将所有标签(第一行)和字段(第二行)组合在一起。有没有办法在jsfiddle中显示这个? –
我玩过你的第一个解决方案,它似乎正在做你的要求。无论您制作视口的范围有多宽,标签都位于按钮和输入上方的自己的行上。就垂直一致而言,我没有看到这个问题。也许我误解了你的问题 –