全宽容器引导答案

【问题标题】：Full width container bootstrap全宽容器引导
【发布时间】：2020-11-25 22:03:00
【问题描述】：

我正在使用 Bootstrap v5 alpha 创建一个简单的仪表板。

Bootstrap 说你必须使用.container、.container-fluid 或一些.container-{size}，然后使用.row 和.col 列。但是我需要仪表板没有边距，并且没有没有边距的引导容器。

我能做什么？

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 sass

【解决方案1】：

虽然没有忽略边距的内置 Bootstrap 容器组件，但使用实用程序类很容易实现。 Bootstrap 5.x 中的机制略有变化，因为它删除了 .no-gutters 类，但您真正需要做的是：

从.container 中删除 X 轴填充
从.row 中删除 X 轴填充

前者通过px-0 实现，后者通过.no-gutters (Bootstrap 4.x) 或g-0 (Bootstrap 5.x) 实现

<div class="container-fluid bg-danger px-0">
  <div class="row g-0 bg-info">
    <div class="col bg-success"><p>Column #1</p></div>
    <div class="col bg-primary"><p>Column #2</p></div>
    <div class="col bg-warning"><p>Column #3</p></div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

在上面的代码示例中，您会注意到容器具有 bg-danger 类，但我们没有看到任何红色背景。我们也没有看到应用于行的bg-info 颜色。那是因为我们已经有效地移除了 Bootstrap 的网格系统默认的边距！

【讨论】：