强制Bootstrap表单列进行换行

Question

我正在尝试使用两列创建一个简单的Bootstrap表单，因此当我调整浏览器大小时，文本字段将保持其宽度和列将换行。这是我的代码：

<form>
    <div class="form-group col-xs-6">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
    </div>
    <div class="form-group col-xs-6">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
    </div>
</form>

Fiddle

但相反，当我调整大小时，输入会变小并且不会发生列包装。我做错了什么？

编辑。 添加了一张图片：

Answer 1

您正在使用col-xs-6，这意味着在Bootstrap（xs）的最小断点中始终有2列，因为col-*-6表示50％width，因此不会包装。

要包装最小的breakpoit，您需要使用col-xs-12 col-sm-6或col-xs-12 col-md-6，这意味着它将width和{{1}中的100％col-xs在50%以及向上或col-sm或向上，具体取决于您希望列包裹的断点的时间。

正如@banzay在下面的评论中所提到的，没有必要使用col-md和更大的断点，所以我更新了下面的代码段。

有关Twitter Bootstrap网格选项的更多信息here

col-xs-12