html - 为什么我的引导网格有太多边距？

Question

我在 Angular 中使用 Bootstrap，我已经通过 npm 安装了它，但由于某种原因，两边的边距太大，有人可以帮我吗？

这是代码

<div class="container">
  <div class="row">
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
  </div>
</div>

更新：我没有任何 css，只有 bootstrap css，这是本周使用 npm 安装的 bootstrap 的缩小版本。

但是我只是认为这是关于引导程序的新内容，所以我想我会再次设置项目并看看会发生什么，甚至可能下载另一个引导程序版本。

标签： htmlangulartwitter-bootstrapbootstrap-4

Answer 1

如果要为容器设置全宽，请使用.container-fluid而不是.container

<div class="container-fluid">
  <div class="row">
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
  </div>
</div>