Bootstrap 列网格：边距问题

Question

在将我的 page.aspx 分成 4 个 columns 时，我注意到 first 和 fourth columns 有几个 blank 空格（在left 和 right 侧），从而缩小 second 和 third 列的 width。

知道如何摆脱 first 和 fourth columns 中的此类默认 margin 问题，从而获得 正确的 整个 page.aspx 的均衡列将不胜感激。

为了更好地说明这个问题，我编写了以下代码：

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div>
  <nav class="navbar">
    <div class="img">
      <img src="...">
    </div>
    <div class="img">
      <img src="...">
    </div>
  </nav>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-3" style="font-size:16px">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
  </div>
</div>

Answer 1

那是因为你使用的容器，你想要的是 container-fluid 没有边距没有填充，什么都没有哈哈。

container 给每个 div 一个指定的固定宽度，这就是空格背后的原因

您可以在此处查看文档：documentation

Bootstrap 列网格：边距问题

Bootstrap column grid: Margin issues

html

css

bootstrap-grid