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

Question

使用bootstrap 3，当它的列上方没有标签时，如何垂直对齐并在底部放置一个按钮？

喜欢这种情况：

double

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

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