Css 引导COLXS包装

我测试了

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-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1

并得到以下结果：

<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>

---

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

这是Bootstrap 3中的一个已知问题

---

由于填充，列的收缩不能小于30px，因此它们最终会被包裹。在网格列<30px中显示内容并不常见，因此在这种情况下，您可能不想使用网格，而是使用内联列表或flexbox。

可能不会出现换行。尝试将文本内容替换为

（点）。我不确定是否理解该问题。您不希望列堆叠，而且

col xs-*

没有堆叠…我不希望

xs

列堆叠。我想要一行12个试过圆点，得到同样的结果。我猜是每个

col-xs-1

上的填充<代码>宽度：8.3333333%*12将显示为100%，但填充会将其推到顶部。