带4列的Bootstrap网格系统

我正在尝试使用自举网格创建网站。在那里，我有一个行里面我有4列是这样的：带4列的Bootstrap网格系统

<body> 

    <div class='container-fluid'> 

    <div class='row'> 

     <div class='col-xs-9'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

     <div class='col-xs-1'> 

     </div> 

    </div> 
    </div> 
</body>

我预计该列不会在小屏幕宽度的突破。但在小型设备中，最后一列打破了行。这是预计还是我错过了什么？

Plunker链接：https://plnkr.co/edit/e9PXa97nnQaBSqXVVbHh?p=preview

来源

2017-05-14 JmRag

您在这里对付引导柱填充。

注意引导CSS状态：

.col-xs-1 { 
    [ ... ] 
    padding-right: 15px; 
    padding-left: 15px 
}

而且还增加了财产

border: 1px solid grey;

所以，无论你做什么，你div总是会有(2 * 15 + 2 * 1) = 32px最低水平维度。您可以在浏览器检查器中看到，div的实际内部宽度在某个时间点为0。

修复是非常明显的然后：删除填充或添加一个负边距，就像row类一样，并将替换为outline，这样即使挤出最后一个像素。

编辑：轮廓部分是一种矫枉过正。删除填充应该没问题。

来源

2017-05-14 11:56:39

带4列的Bootstrap网格系统

回答

相关问题