调整大小时，Bootstrap 3网格的行为不符合预期

Question

以下代码在某些分辨率下工作正常但是当我向下挤压浏览器时，col-xs-1会被推到下一行。这段代码非常简单明了，我不确定这里有什么问题。

似乎bootstrap宽度百分比偏差很小。

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

JSFiddle

Answer 1

问题在于填充。

Bootstrap假设您正在使用其布局配置;它的Navbar和其他元素都有默认的填充，所以一切都是对齐的。我稍微修改了你的例子;在你的小提琴上，我无法看到bootstrap.js和jquery.js所以我写了一个jsbin：

https://jsbin.com/komevecaho/edit?html,output

此外，这个问题可能有助于澄清问题：Remove padding from columns in Bootstrap 3