Bootstrap 4 白色 space 在右侧

Question

任何人都可以解释一下，为什么我在 Bootstrap 4 的右侧得到一个白色的 space？

这是页面的主要代码块

<main id="intro" role="intro" class="inner text-center">
    <h2>Lorum Ipsum</h2>
    <p class="lead">Register now!</p>
    <p class="lead">
      <a href="<?php echo HOME ?>/register" class="btn btn-light btn-lg">Click here</a>
    </p>
</main>

和自定义 CSS

html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/intro-1.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  color: #fff;
  padding-top: 250px;
}

如果需要，我可以向网站提供 url。感谢您的帮助！！

编辑： 这是网站 link： http://drohnen-vz.de

Answer 1

你的问题是因为你的页脚有一行没有容器，所以你从右侧获得了边距。给你一个小提示，检查你的元素并删除它们直到错误消失，然后你就知道是什么导致了错误

通过向页脚添加容器 class 来修复您的页面：

<footer class="pt-4 my-md-5 pt-md-5 border-top text-center container">
  <div class="row">
    <div class="col-12 col-md">
      <img class="mb-2" src="img/logo-kurz.svg" alt="" width="75" height="75">
      <small class="d-block mb-3 text-muted">© 2018</small>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Links</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="http://drohnen-vz.de/agb">AGB</a></li>
        <li><a class="text-muted" href="http://drohnen-vz.de/impressum">Impressum</a></li>
        <li><a class="text-muted" href="#">Datenschutzrichtlinien</a></li>
      </ul>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Partner</h5>
      <ul class="list-unstyled text-small">
        <li><img src="img/partner-1.svg" width="100px"> <img src="img/partner-dhl.svg" width="100px"></li>
        <li><br></li>
        <li><img src="img/partner-sofort.svg" width="100px"> <img src="img/partner-paypal.svg" width="100px"></li>
      </ul>
    </div>
  </div>
</footer>

Bootstrap 4 白色 space 在右侧

Bootstrap 4 white space on right side

javascript

css

removing-whitespace

bootstrap-4