从页面右侧删除空格[重复]答案

【问题标题】：Remove blank space from right of page [duplicate]从页面右侧删除空格[重复]
【发布时间】：2018-10-01 20:15:37
【问题描述】：

我用 Bootstrap 4 做了一个页面，右边有一个空白区域。除了类col的div中的导航栏外，我拥有一切。我没有将rows 和cols 放在container div 中，因为Bootstrap documentation 建议不使用它来进行边缘到边缘设计。（我尝试将它们放在container-fluid div 中，但差距仍然存在）。

由于col左右加了15px，我也试了下，还是没有去掉间隙：

.col {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

CodePen

【问题讨论】：

在这种情况下该怎么做是从页面中删除内容，直到问题消失。然后你删除的最后一件事是导致问题。如果这仍然无法帮助找到解决方案，那么您可以在此处发布minimal reproducible example。
Bootstrap（v3 和 v4）.row 有负边距。使用container-fluid 抵消填充。
正如我在问题@ZimSystem 中提到的，我尝试将 col div 放入容器流体 div 中，但差距仍然存在。现已修复，但您将我的问题标记为重复问题的回应和行动似乎没有必要。
请发布在问题中重现问题的代码，而不是可能更改的外部链接。如果您阅读副本和the documentation，您会发现cols 不会进入容器流体，row 会。这也在接受的答案中完成。
点了。将来，除了 CodePen 链接之外，我还将在问题中添加所有代码。我应该更具体一点，说我的列在行内，但当时没有费心提及它，因为这从我的 CodePen 中很明显。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

试试这个

.col{
  padding: 0 !important;
}

.row{
  margin-left: 0;
  margin-right: 0;
}

这就是我讨厌使用引导程序的原因，因为您必须使用!important 来覆盖引导程序默认样式。使用基于引导程序的主题更糟糕，因为它已经使用!important 来覆盖引导程序样式，并且您想再次覆盖它

【讨论】：

【解决方案2】：

您需要做的就是像这样将所有row 包装在container-fluid 中

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="hero-image">

      </div>
    </div>
  </div>
</div>

<section id="about">
    <div class="container-fluid">
       <div class="row about">
          <div class="col">

          </div>
       </div>
     </div>
</section>

在portfolio 和contact 中您也必须这样做

【讨论】：

如果你得到正确答案，请接受或投票
如果这个或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。
这解决了部分问题，但不是全部。我还需要从英雄图像 col 中删除填充。

【解决方案3】：

无需覆盖引导类。如果需要，请使用 inbuilt utilities class 覆盖。由于hero image 必须是edge-to-edge，您可以使用p-0 删除填充。在页脚中，您也缺少 row-col 结构。并将您的内容包装在 container-fluid 中，如下例所示。

试试这个

查看演示HERE

HTML

<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">

      <!-- Navbar Content -->
  </div>

</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col p-0">
      <div class="hero-image">
        <div class="hero-text text-white">
          <h1>NC</h1>
          <h5>Web developer</h5>
          <form action="mailto:email@gmail.com" method="post" enctype="text/plain">
            <button class="btn btn-dark btn-top btn-contact">Contact Me</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <section id="about">
    <div class="row about">
      <div class="col">
        <h2>About</h2>

        <!-- Content -->

      </div>
    </div>
  </section>

  <section id="portfolio">
    <div class="row portfolio">

      <div class="col-sm-12">
        <h2>Portfolio</h2>
      </div>
      <!-- Content -->

    </div>
    <!-- End of row div -->
  </section>

  <section id="contact">
    <div class="row contact">
      <div class="col center-block">
        <h2>Contact</h2>
        <p>Have a question or want to work together?</p>

        <!-- Content -->

      </div>
    </div>
  </section>

  <div class="footer bg-dark row">
    <div class="col">

     <!-- Content -->

    </div>
  </div>
</div>

【讨论】：