Bootstrapxs屏时不同栏目聚在一起

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（小型设备）时，其中一列 ("Vaccines/Chip") 保留在另一列之下，而不是传递到破坏结构的下一行。

以下图片可提供帮助：

Big screen (lg)

Phone screen (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

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

Answer 2

我认为另一种解决方案是在每 12 列之后放置 <div class="visible-xs clearfix"></div> 以强制将列按 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>

Bootstrapxs屏时不同栏目聚在一起

Bootstrap different columns get together when xs screen

html

mobile

twitter-bootstrap

responsive