css - Bootstrap col-xs 包装

Question

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

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns.

所以我做了以下事情:

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

得到以下内容:

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

Answer 1

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

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