Question

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

带代码的

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

Answer 1

问题是float:none覆盖了bootstrap 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>

Answer 2

为什么不将按钮放在.row-fluid中，并将每个按钮设为.span3？

Answer 3

另一种选择是使用媒体查询来调整浮动，因为自举在col-xs-12断点处断开（768px）：

@media (max-width: 768px) {
  #mybutt{float:left !important;text-align:left;}
}

jsFiddle Demo

这样，您可以根据需要保留.vcenter课程，并执行其他必要的操作（例如text-align:left）。

Bootstrap列不会在小屏幕上转到下一行

3 个答案: