html - Bootstrap列不会转到小屏幕的下一行

我正在尝试在同一行中创建一个带有4个按钮的表单字段。我使用的是Bootstrap，因为我希望字段和按钮垂直对齐，所以我为此创建了一个CSS类vcenter。

JSfiddle和代码

的HTML

<form>
                <div class="row stopWrap">
                    <div class="form-group col-lg-8 col-md-8 col-sm-8 col-xs-12 vcenter">
                        <label for="inputFirstName">First Name</label>
                        <input type="email" class="form-control" id="inputFirstName" placeholder="First Name">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center vcenter">
                        <button type="button" class="btn btn-warning" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        </button>

                        <button type="button" class="btn btn-primary" aria-label="Left Align">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>

                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                        </button>

                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
                </form>

的CSS

.stopWrap{
 white-space: nowrap;
}
.vcenter {
 display: inline-block;
 vertical-align: middle;
 float: none;
}

最佳答案

问题是由于float:none覆盖了引导程序float:left。
这就是为什么它不会转到下一行。

在您的情况下，您不应使用vcenter。删除它并添加类似这样的内容以垂直对齐您的按钮：

<div>
   &nbsp;
</div>

http://jsfiddle.net/5sceeno8/

它看起来像是骇客，但这并不是因为您将<input type="email" />宽度设置为100％，您显然希望在单独的行上显示标签和输入内容。与此类似：

<div>
    <label for="inputFirstName">First Name</label>
</div>
<div>
    <input type="email" class="form-control" id="inputFirstName" placeholder="First Name">
</div>

使用 之后，我们的按钮块具有与输入类似的结构：

<div>
   &nbsp; //this is the replacement for <label> above which has the same height.
</div>
<div>
   //our buttons here
</div>

关于html - Bootstrap列不会转到小屏幕的下一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35236788/