Bootstrap col-xs 包装 [英] Bootstrap col-xs wrapping

问题描述

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

<块引用>

不想让您的列简单地堆叠在较小的设备中吗?使用通过添加 .col-xs-* 获得额外的中小型设备网格类.col-md-* 到您的列.

所以我做了以下事情:

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

并得到以下内容:

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

解决方案

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

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

I was testing out the col-xs to prevent stacking on smaller devices stated as follows:

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.

So I did the following:

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

And got the following:

Any reason why this is happening and how to fix this?

解决方案

This is a known issue in Bootstrap 3 https://github.com/twbs/bootstrap/issues/10513

The columns can't shrink less that 30px (due to padding) so they eventually they wrap. Showing content in the grid columns < 30px isn't common, so you may not want to use the grid in this case, and instead use an inline list or flexbox.

这篇关于Bootstrap col-xs 包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！