引导-不同宽度的两(多)列堆叠

Question

我有一个4列的引导网格。当显示大小为平板时，我希望有列1-2和3-4堆栈。当显示大小为phone时，我希望所有4列都堆栈起来。但对于任何大的大小，列都不会堆叠。

在引导过程中，会有一个简单的方法来实现这一点吗？下面是4列的代码示例：

<div class="row">
    <fieldset class="form-group col-sm-3">
        <label for="a1">work phone</label>
        <input id="a1" type="text" class="form-control" readonly="readonly">
    </fieldset>
    <fieldset class="form-group col-sm-3">
        <label for="a2">location</label>
        <input id="a2" type="text" class="form-control" readonly="readonly">
    </fieldset>
    <fieldset class="form-group col-sm-3">
        <label for="a3">contractor</label>
        <input id="a3" type="text" class="form-control" readonly="readonly">
    </fieldset>
    <fieldset class="form-group col-sm-3">
        <label for="a4">job code description</label>
        <input id="a4" type="text" class="form-control" readonly="readonly">
    </fieldset>
</div>

Answer 1

如果您希望在第1和第2，然后第3和第4之间，您可能需要嵌套您的列/行，并添加另一个视口的另一个列的大小。见嵌套和混合柱

请参见工作示例片段。

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a1">work phone</label>
          <input id="a1" type="text" class="form-control" readonly="readonly">
        </fieldset>
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a2">location</label>
          <input id="a2" type="text" class="form-control" readonly="readonly">
        </fieldset>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a3">contractor</label>
          <input id="a3" type="text" class="form-control" readonly="readonly">
        </fieldset>
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a4">job code description</label>
          <input id="a4" type="text" class="form-control" readonly="readonly">
        </fieldset>
      </div>
    </div>
  </div>
</div>

​