Bootstrap：如何在移动视图中将表单字段移动到自己的行？

Question

我有一个漂亮的Bootstrap形式，效果很好，对移动设备反应灵敏。但是，某些表单字段在移动屏幕上显得过于狭窄。

例如，这里是桌面版的几个字段，非常棒：

这就是该表单的相同部分，但在移动视图中：

正如你所看到的，这些领域变得有点狭窄。我更喜欢这种形式只是将这些字段以100％的宽度包裹在自己的行上。有没有办法在Bootstrap中做到这一点？

Answer 1

用于移动设备，使用类col-xs-12和桌面使用col-lg-12 有关更多信息，请访问此网站 http://getbootstrap.com/css/

Answer 2

您正在寻找的布局是

<div class="row">
    <div class="col-md-12 col-sm-12">
    </div>
    <div class="col-md-4 col-sm-12">
    </div>
    <div class="col-md-4 col-sm-12">
    </div>
    <div class="col-md-4 col-sm-12">
    </div>
</div>

Fiddle

Answer 3

Bootstrap框架有各种类来帮助解决这个问题。首先确保所有表单字段都应用了form-control类。这使您的控件达到容器的100％宽度。其次，使用col-*类来指定不同分辨率的大小。因为这是Bootstrap，所以首先要考虑移动设备。例如：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <input id="country" class="form-control" />
        </div>
        <div class="col-xs-12 col-sm-4">
            <input id="city" class="form-control" />
        </div>
        <div class="col-xs-12 col-sm-4">
            <input id="state" class="form-control" />
        </div>
        <div class="col-xs-12 col-sm-4">
            <input id="zipcode" class="form-control" />
        </div>
    </div>
</div>