具有 4 列的引导网格系统 [重复]

【问题标题】：Bootstrap grid system with 4 columns [duplicate]具有 4 列的引导网格系统 [重复]
【发布时间】：2017-10-13 06:46:12
【问题描述】：

我正在尝试使用引导网格创建一个站点。那里有一行，里面有 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 链接：https://plnkr.co/edit/e9PXa97nnQaBSqXVVbHh?p=preview

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您在此处处理引导列填充。

请注意，引导 css 状态：

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

你还添加了属性

border: 1px solid grey;

因此，无论您做什么，您的div 的最小水平尺寸始终为(2 * 15 + 2 * 1) = 32px。您可以在浏览器检查器中看到，div 的实际内部宽度有时是 0。

那么修复非常明显：删除填充或添加负边距，就像 row 类所做的那样，并将您的 border 替换为 outline，这样您甚至可以挤出最后一个像素。

编辑：大纲部分有点矫枉过正。删除填充应该没问题。

【讨论】：