html - Bootstrap v3.2.0 网格系统布局

Question

好吧，我可能在这里遗漏了一些非常简单的东西，但我无法弄清楚为什么我的 cols 使用 twitter bootstrap 会这样。当我将浏览器调整到大约 323px 时会发生这种情况。我的页面上没有其他 css 样式或 html。我附上了 2 个屏幕截图以供引用。

我相应地设置了我的列，但是当我将浏览器调整为最小尺寸时，它会将最后一个 col-xs-1 下降一行。

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

如果我要有 4 个 col-xs-3，它们会在浏览器中正确水平显示。

<div class="container">
    <div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
    </div>
</div>

这是 Bootstrap :http://www.bootply.com/xuVoyvjNKr

我在这里错过了什么？

Answer 1

这只是一道数学题...

---

You have 3 x col-xs-1 and 1 x col-xs-9...

文档宽度:360px....

一个 col-xs-1 应该有一个宽度:360/12 = 30px...

但是你忘了 div col-xx-xx 有 padding-right 和 padding-left to 15px...

所以:col-xs-1 的宽度 - padding = 30px - 30px = 0...

---

你没有足够的地方，所以它跳了一行......

col-xs-3 因为 360/12*3 = 90px 不是这种情况。 ..

---

如果您愿意，您可以将小 View 的填充设置为 0，但如果您的屏幕尺寸再次变小，问题将再次出现....