Bootstrap：如何在小屏幕上的两个其他列的顶部堆叠两列？

Question

我有一个form布局，其中有4列在{x}屏幕的小屏幕或xs屏幕上叠加。

有没有办法在小的或xs上只在其他两个上面堆叠2列？

理想情况下，我想在xs / small上显示第1列和第2列以及第3列和第4列，但是在中/大的同一行中都显示。

100% width

jsfiddle

小屏幕上的理想布局：

Answer 1

在这种情况下，您需要为额外的小型设备XS添加课程col-xs-6

查看Boostrap Docs以了解每个断点中要使用的类

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form role="search" method="GET" action="/search/">
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="first-name">Column 1:</label>
    <input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="last-name">Column 2:</label>
    <input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="city-search">Column 3:</label>
    <input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
  </div>
  <div class="form-group form-group-sm  col-xs-6 col-sm-3">
    <label for="city-search">Column 4:</label>
    <input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
  </div>
  <div class="input-group-btn">
    <button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</form>

Answer 2

将这些课程用于四个<div>：form-group form-group-sm col-sm-6 col-xs-6 col-md-3。