具有4列的Bootstrap网格系统

时间:2017-05-14 11:20:36

标签: twitter-bootstrap

我正在尝试使用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

1 个答案:

答案 0 :(得分:0)

你正在处理这里的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,这样你甚至可以挤出最后一个像素

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