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>

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

我在这里缺少什么？

Answer 1

这只是一个关于数学的问题......

---

  

你有3 x col-xs-1和1 x col-xs-9 ...

文档宽度：360px ....

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

但是你忘了divs col-xx-xx的填充右边和填充左边是15px ......

所以： col-xs-1的宽度 - 填充= 30px - 30px = 0 ......

---

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

col-xs-3 并非如此，因为 360/12 * 3 = 90px ......

---

如果需要，可以将小视图的填充设置为0，但如果屏幕尺寸再次变大，问题将再次出现....