包裹

Question

我正在测试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>

得到以下内容：

出现这种情况的原因以及如何解决这个问题？

Answer 1

这是Bootstrap 3 https://github.com/twbs/bootstrap/issues/10513

中的一个已知问题

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