Twitter bootstrap 4列引导式网格系统_Twitter Bootstrap

Twitter bootstrap 4列引导式网格系统

twitter-bootstrap

Twitter bootstrap 4列引导式网格系统,twitter-bootstrap,Twitter Bootstrap,我正在尝试创建一个带有引导网格的站点。我有一行，里面有4列，如下所示： <body> <div class='container-fluid'> <div class='row'> <div class='col-xs-9'> </div> <div class='col-xs-1'> </div> <div cl

我正在尝试创建一个带有引导网格的站点。我有一行，里面有4列，如下所示：

    <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链接：

这里处理的是引导列填充

请注意，引导css声明：

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

您还添加了属性

border: 1px solid grey;

因此，无论您做什么，您的

div

始终具有最小水平维度

（2*15+2*1）=32px

。您可以在浏览器检查器中看到，

div

的实际内部宽度在某一点上为

修复方法非常明显：删除填充或添加负边距，就像

行

类所做的那样，并将

边框

替换为

轮廓

，这样您甚至可以挤出最后一个像素

编辑：轮廓部分有点过分了。删除填充应该很好。