xs screen时bootstrap不同的列聚在一起答案

【问题标题】：Bootstrap different columns get together when xs screenxs screen时bootstrap不同的列聚在一起
【发布时间】：2016-02-26 21:30:55
【问题描述】：

我有五个不同的列：

<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（小型设备）时，其中一列（“疫苗/芯片”）位于另一列下方，而不是传递到破坏结构的下一行。

以下图片有帮助：

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>

【问题讨论】：

引导程序中每行的列数应等于 12。您的 xs 列等于 30。
@j08691 我已将超过 12 列放入一行。这很有帮助，例如，如果列是由服务器动态生成的，而您只想在其中抛出一堆列。根据the docs，“如果在一行中放置了超过 12 列，则每组额外的列将作为一个单元换行到新行。”这表明可以放置两列以上，因为它们只会换行。
@Andrew - 我没有说这是禁止的，但是列数超过 12 并不是真正的预期用途。
@j08691 我知道，但你暗示你不应该这样做。就像我说的，如果您想动态附加列，它会很有用。您可以使用 clearfix 类添加一个 div，以将列强制转换为位于不同断点的行。
@Andrew 是的，它对动态网站很有帮助，我经常这样做，这是我第一次遇到这种情况。我在位于另一组 col-xs-7 而不是 col-xs-6 下的列中找到了一个不正确的解决方案，但就像我说的那样，这不是正确的方法。我从来没有听说过 clearfix，你能告诉我在每个 div 中我应该使用它吗？

标签： html twitter-bootstrap mobile responsive

【解决方案1】：

我认为另一种解决方案是在每 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>

【讨论】：

太完美了！谢谢，因为我不想破坏我期待的设计！再次感谢你

【解决方案2】：

嗯，row 的总列数应该是 12。在 xs 模式下，您似乎拥有5 x col-xs-6，即30。尝试其他组合，使总数为12。

【讨论】：

所以我应该用新的一行将它们分开，但是在移动屏幕之外我希望它们保持在一条线上，就像在 LG 图片中一样，有没有办法做到这一点？跨度>
你应该使用sm，而不是xs。见stackoverflow.com/questions/19828435/…
@loan 但我认为她想要 xs，因为她希望它在移动设备中保持在线。如果你使用 sm，它会分成不同的行。