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>

右侧的Bootstrap 4空白区域

1 个答案: