引导 col-xs 包装答案

【问题标题】：Bootstrap col-xs wrapping引导 col-xs 包装
【发布时间】：2017-07-17 09:27:03
【问题描述】：

我正在测试 col-xs 以防止在较小的设备上堆叠，如下所述：

不希望您的列简单地堆叠在较小的设备中？使用通过添加 .col-xs-* 额外的中小型设备网格类 .col-md-* 添加到您的列中。

所以我做了以下事情：

<div class='container'>
    <div class='row'>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
    </div>
</div>

得到以下结果：

发生这种情况的任何原因以及如何解决此问题？

【问题讨论】：

可能没有自动换行。尝试将文本内容替换为.（点）
我不确定我是否理解这个问题。您不希望列堆叠，col-xs-* 没有堆叠...
我不希望 xs 列堆叠。我要一排 12 个
试了一下，结果一样
明白了。我的猜测是每个col-xs-1 上的填充。 width:8.3333333% * 12 将达到 100%，但填充会将其推到顶部。

标签： css twitter-bootstrap

【解决方案1】：

这是 Bootstrap 3 https://github.com/twbs/bootstrap/issues/10513 中的一个已知问题

列不能缩小到 30 像素以下（由于填充），因此它们最终会换行。在小于 30px 的网格列中显示内容并不常见，因此您可能不想在这种情况下使用网格，而是使用内联列表或弹性框。

【讨论】：