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/

有没有人有更好的方法来解决这个问题？或者我在做布局结构错误？

谢谢！

来源

2017-04-04 Luan Caius

您的第一个解决方案似乎适合用途。那么它怎么回应，你有什么样的布局问题呢？ –

如果您调整布局大小，则应该在字段和单个字段之上标注标签。使用第一种解决方案，您可以将所有标签（第一行）和字段（第二行）组合在一起。有没有办法在jsfiddle中显示这个？ –

我玩过你的第一个解决方案，它似乎正在做你的要求。无论您制作视口的范围有多宽，标签都位于按钮和输入上方的自己的行上。就垂直一致而言，我没有看到这个问题。也许我误解了你的问题 –

你可以尝试用垂直对齐排列：

.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;}

来源

2017-04-04 19:16:48

但我需要为每种类型的引导列做这个。像col-xs-1，col-xs-2，col-sm-3 ...？ –

我更新了答案 –

Bootstrap 3按钮/文本框垂直对齐，不带标签

回答

相关问题