Question

我正在尝试使用bootstrap网格创建一个站点。在那里我有一排，在里面我有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

Answer 1

你正在处理这里的bootstrap列填充。

请注意，bootstrap 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，这样你甚至可以挤出最后一个像素

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

具有4列的Bootstrap网格系统

1 个答案: