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

以下图片可以提供帮助：

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>

当xs屏幕

2 个答案: