html - xs screen时bootstrap不同的列聚在一起

Question

我有五个不同的列：

<div class="row">

  <div class="col-sm-3 col-xs-6"></div>

  <div class="col-sm-2 col-xs-6"></div>

  <div class="col-sm-2 col-xs-6"></div>

  <div class="col-sm-2 col-xs-6"></div>

  <div class="col-sm-3 col-xs-6"></div>

</div>

所有内容都有width: 100%，所以大小没有预期的那么大padding: 0px。

当屏幕为 XS（小型设备）时，其中一列（“疫苗/芯片”）位于另一列下方，而不是传递到破坏结构的下一行。

以下图片可提供帮助：

大屏幕（lg）

手机屏幕 (xs)

编码：

<div class="row" id="filters">

  <hr class="hr-between-animals" />

  <div class="col-sm-3 col-xs-6" style="margin-top:10px; padding:0">
    <b>Type of animal:</b>
    <br />
    <input type="checkbox" /> Dog
    <br />
    <input type="checkbox" /> Cat
    <br />
    <input type="checkbox" /> Rabbit
    <br />
    <input type="checkbox" /> Reptil
    <br />
    <input type="checkbox" /> Bird
    <br />
    <input type="checkbox" /> Fish
    <br />
    <input type="checkbox" /> Rat
  </div>

  <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0">
    <b>Size:</b>
    <br />
    <input type="checkbox" /> Small
    <br />
    <input type="checkbox" /> Medium
    <br />
    <input type="checkbox" /> Large
    <br/>
  </div>

  <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0">
    <b>Vaccines/Chip:</b>
    <br />
    <input type="checkbox" /> Vaccines
    <br />
    <input type="checkbox" /> Chip
  </div>

  <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0">
    <b>Gender:</b>
    <br />
    <input type="checkbox" /> Female
    <br />
    <input type="checkbox" /> Male
    <br />
    <br />
  </div>

  <div class="col-sm-3 col-xs-6" style="margin-top:10px; padding: 0">
    <b>Age:</b>
    <br />
    <input type="text" id="amount" readonly style="border:0; color:#3D3D3D; background-color:transparent" />
    <div id="slider-range" style="border-color:#3D3D3D; border-          radius:5px; margin-top:10px"></div>
  </div>

</div>

Answer 1

那么， a 的总列数row应该是12。在xs模式下，您似乎拥有5 x col-xs-6which is 30. 尝试另一种组合，使总数为12。

Answer 2

我认为另一种解决方案是<div class="visible-xs clearfix"></div>在每 12 列之后放置以强制将列放入 XS 大小的行中。像这样：

<div class="row">
    <div class="col-sm-3 col-xs-6"></div>
    <div class="col-sm-2 col-xs-6"></div>
    <div class="visible-xs clearfix"></div>
    <div class="col-sm-2 col-xs-6"></div>
    <div class="col-sm-2 col-xs-6"></div>
    <div class="visible-xs clearfix"></div>
    <div class="col-sm-3 col-xs-6"></div>
</div>