Css 删除页面右侧的空白

我用bootstrap4创建了一个页面，右边有一个空白。 除导航条外，我所有的东西都放在一个带有class

col

的div中。我没有将

行

s和

列

s放在

容器

div中，因为Bootstrap建议在边缘到边缘的设计中不使用它。（我试着把它们放在一个

容器流体
div中，但间隙仍然存在）

由于
col
在左右两侧添加了15px，我也尝试了以下方法，但没有消除间隙：

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

试试这个

.col{
  padding: 0 !important;
}

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

这就是为什么我讨厌使用引导，因为你必须使用
！重要信息
覆盖引导默认样式。使用基于引导的主题更糟糕，因为它已经在使用
！重要信息
要覆盖引导样式，并且您想再次覆盖它
请尝试以下操作

.col{
  padding: 0 !important;
}

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

这就是为什么我讨厌使用引导，因为你必须使用
！重要信息
覆盖引导默认样式。使用基于引导的主题更糟糕，因为它已经在使用
！重要信息
要覆盖引导样式，并且您希望再次覆盖它
您需要做的就是像这样将所有
行
包装在
容器流体
中





在
公文包
和
联系人
中，您需要做的就是像这样将所有
行
包装在
容器流体
中





在
公文包
和
联系人
中必须执行相同的操作，不需要覆盖引导类。如果必须，请使用
内置实用程序类
进行覆盖。由于
hero image
必须是
edge-to-edge
，因此可以使用
p-0
删除填充。在页脚中，您还缺少
行列
结构。并将内容包装在容器流体中，如下面的示例所示

试试这个

检查演示

HTML


娜塔莉·卡多特
网络开发者
联系我
关于
文件夹
接触
有问题还是想一起工作

无需覆盖引导类。如果必须，请使用
内置实用程序类
进行覆盖。由于
hero image
必须是
edge-to-edge
，因此可以使用
p-0
删除填充。在页脚中，您还缺少
行列
结构。并将内容包装在容器流体中，如下面的示例所示

试试这个

检查演示

HTML


娜塔莉·卡多特
网络开发者
联系我
关于
文件夹
接触
有问题还是想一起工作

在这种情况下，要做的是从页面中删除内容，直到问题消失。然后，您删除的最后一个内容导致了问题。如果这仍然无助于找到解决方案，那么您可以在此处发布。引导（v3和v4）
。行
具有负边距。使用
container fluid
来抵消填充。正如我在问题@ZimSystem中提到的，我尝试将col div放入container fluid div中，但间隙仍然存在。现在已修复，但您将我的问题标记为重复问题的回答和操作似乎并不合理。请在问题中发布复制问题的代码，而不是可能更改的外部链接。如果您阅读副本，您将看到COL不会进入容器流体中，
行
会。这一点在公认的答案中也有体现。在未来，我将添加所有的代码内的问题，除了一个代码笔链接。我应该说得更具体一些，说我的COL在行内，但当时没有提及，因为从我的代码笔中可以明显看出这一点。在这种情况下，要做的是从页面中删除内容，直到问题消失。然后，您删除的最后一个内容导致了问题。如果这仍然无助于找到解决方案，那么您可以在此处发布。引导（v3和v4）
。行
具有负边距。使用
container fluid
来抵消填充。正如我在问题@ZimSystem中提到的，我尝试将col div放入container fluid div中，但间隙仍然存在。现在已修复，但您将我的问题标记为重复问题的回答和操作似乎并不合理。请在问题中发布复制问题的代码，而不是可能更改的外部链接。如果您阅读副本，您将看到COL不会进入容器流体中，
行
会。这一点在公认的答案中也有体现。在未来，我将添加所有的代码内的问题，除了一个代码笔链接。我应该更具体，说我的COLS是行内，但没有麻烦提到它，因为它是从我的CODEPs明显。如果你得到正确的答案，请接受或投票表决的答案，如果这个或任何答案已经解决了你的问题，请考虑通过点击复选标记接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这么做，这是索尔
<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>Natalie Cardot</h1>
          <h5>Web developer</h5>
          <form action="mailto:nataliecardot@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>