Bootstrap 4右侧空白

Question

谁能解释我，为什么我在Bootstrap 4的右侧出现空白？

这是页面的主要代码块

<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;
}

如果需要，我可以提供该网站的网址。谢谢你的帮助！！

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

Answer 1

您的问题是因为页脚有一排没有容器的行，因此您无法从右侧获得页边空白。以后为您提供一些提示，请检查您的元素并将其删除，直到错误消失，然后您才知道导致错误的原因

通过在页脚中添加容器类来修复页面：

<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>