Question

我用Bootstrap 4创建了一个页面，右边有一个空白区域。除了带有col类的div中的导航栏之外，我还有其他所有内容。我并没有将row和col放在container div中，因为Bootstrap documentation建议不使用它进行边缘到边缘的设计。（我尝试将它们放在container-fluid div中，差距仍在那里）。

由于col左右增加了15px，我也尝试了以下内容，并没有消除差距：

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

CodePen

Answer 1

试试这个

.col{
  padding: 0 !important;
}

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

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

Answer 2

无需覆盖引导类。如果必须，请使用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>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>

Answer 3

您需要做的就是将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

中执行相同操作

从页面右侧删除空格

3 个答案: