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

Question

使用引导程序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>

我主要使用了三种解决方案：

1. 使用2行（一个用于标签，一个用于文本框和按钮），例如https://jsfiddle.net/luancaius/7ygoys11/ 。 该解决方案没有响应，并产生了一些布局问题。
2. 在中间列上使用margin-top。 也有反应灵敏的问题。
3. 使用具有不间断空格的标签可以解决此问题，但效果不是很好。 这是我目前的解决方案。 https://jsfiddle.net/luancaius/mr5wLoxf/

有谁有更好的方法来解决此问题？ 还是我的布局结构做错了？

谢谢！

Answer 1

您可以尝试使用vertical-align对齐：

.col-xs-3 {display:inline-block; vertical-align:bottom; float:none;}

只要确保每个col-xs-3 div之间的html中没有空格即可。 或使用注释将它们分开，如下所示：

<div>...</div><!--  space   --><div>...</div>

https://jsfiddle.net/yw0a6689/

更新：您可以像这样，而不是对每一列都这样做：

.container > .row > div {display:inline-block; vertical-align:bottom; float:none;}

或更具体地讲，通过为该行提供.myrow之类的类，然后声明：

.myrow > div {display:inline-block; vertical-align:bottom; float:none;}