html - 强制 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% 宽度，因此不换行。

要包裹在最小的断点中，您需要改用 col-xs-12 col-sm-6 或 col-xs-12 col-md-6 ，这意味着它将在 col-xs 中为 100% width，在 col-sm 中为 50% 及以上或 col-md 或更高版本，具体取决于您希望列换行的断点时间。

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group col-sm-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-sm-6">
    <label for="name" class="control-label">Padding Top</label>
    <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
  </div>
</form>