Bootstrap 3按钮/文本框垂直对齐没有标签答案

【问题标题】：Bootstrap 3 button/textbox vertical align without labelBootstrap 3按钮/文本框垂直对齐没有标签
【发布时间】：2017-08-30 00:26:54
【问题描述】：

使用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/

有没有人有更好的方法来解决这个问题？还是我做错了布局结构？

谢谢！

【问题讨论】：

您的第一个解决方案似乎适合目的。它没有响应怎么办？你有什么布局问题？
如果你调整布局大小，你应该得到字段上方的标签和一个单独的字段。使用第一个解决方案，您将所有标签放在一起（第一行），然后将字段放在一起（第二行）。有没有办法在 jsfiddle 中显示这个？
我玩过您的第一个解决方案，它似乎可以满足您的要求。标签位于按钮和输入上方的单独行中，无论您使视口有多窄。就垂直对齐而言，我没有看到问题。也许我误解了你的问题
例如，当您有很多字段并且需要将其中一些字段从 col-md-3 更改为 col-xs-12 时，就会出现问题。第一行将拆分，标签不会与其输入对齐。像这样jsfiddle.net/luancaius/k05qgesj，在小屏上不行。
这个怎么样？我使用透明标签作为保持无标签按钮和字段之间垂直对齐一致性的快速方法。像您的某些解决方案一样，我只使用一行。 jsfiddle.net/k05qgesj/1

标签： html twitter-bootstrap-3 responsive-design label vertical-alignment

【解决方案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;}

【讨论】：

但是我需要对每种类型的引导程序都这样做吗？像 col-xs-1、col-xs-2、col-sm-3...？