我的页脚没有占据页面的整个长度 - Bootstrap答案

【问题标题】：My footer does not take the whole length of the page - Bootstrap我的页脚没有占据页面的整个长度 - Bootstrap
【发布时间】：2020-01-06 03:35:29
【问题描述】：

我知道这个问题已经被问过好几次了，但我没有找到任何适合我的情况的解决方案，我试图按照this solution 的规定放置一个容器流体，但它似乎不起作用。

一切都很顺利，但是当我添加页脚时，它并没有占据页面的整个长度，或者是行的整个长度，有由容器流体引起的填充。

这是代表问题的图片：

正如你所看到的，边框没有完成整个长度

这是我从容器流体中移除填充物时的照片，其中包括我所有的主要内容：

如你所见，出现了一个overflow-x

所以我的问题是，我是否需要担心解决溢出问题，或者将页脚放在整个长度上？我不知道该走哪条路！

我的 HTML 页脚：

<footer id="footer">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="email_newsletter">S'inscrire gratuitement à la Newsletter :</label>
                            <input type="email" id="email_newsletter" class="form-control w-50 email" aria-describedby="email_newsletter_note">
                            <small id="email_newsletter_note" class="form-text text-muted">Nous ne partageons en aucun cas vos informations.</small>
                        </div>
                        <button type="submit" class="btn btn-primary">Valider</button>
                    </form>
                </div>
                <div class="col-md-6">
                    <a href="">Mentions Légales</a>
                </div>
            </div>
        </div>
    </div>
</footer>

【问题讨论】：

溢出是您的页脚宽度错误或父元素格式不正确的原因。将代码添加到您的问题中。页脚需要在容器流体之外。
检查getbootstrap.com/docs/4.1/examples/album
当我将页脚从容器流体中取出时，会出现溢出，所以如果我理解正确，我必须解决我的溢出问题，同时将页脚从容器流体中取出，是吗？
row 类在引导程序中留有负边距，因为容器/容器流体中的默认填充。所以，把页脚移到外面，然后给它添加容器类。

标签： html css bootstrap-4

【解决方案1】：

解决方案：

我的页脚在一个容器流体中，将它从那里取出并添加一个容器流体到我的页脚本身就足够了：

<footer id="footer" class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="email_newsletter">S'inscrire gratuitement à la Newsletter :</label>
                            <input type="email" id="email_newsletter" class="form-control w-50 email" aria-describedby="email_newsletter_note">
                            <small id="email_newsletter_note" class="form-text text-muted">Nous ne partageons en aucun cas vos informations.</small>
                        </div>
                        <button type="submit" class="btn btn-primary">Valider</button>
                    </form>
                </div>
                <div class="col-md-6">
                    <a href="">Mentions Légales</a>
                </div>
            </div>
        </div>
    </div>
</footer>

【讨论】：

【解决方案2】：

代码给出了页面的整个长度的页脚

<footer class="page-footer">

      <!-- Footer Links -->
      <div class="container-fluid">

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-6 mt-md-0 mt-3">

            <!-- Content -->
            <h5 class="text-uppercase">Footer Content</h5>
            <p>Here you can use rows and columns to organize your footer content.</p>

          </div>
          <!-- Grid column -->

          <hr class="clearfix w-100 d-md-none pb-3">

          <!-- Grid column -->
          <div class="col-md-3 mb-md-0 mb-3">

            <!-- Links -->
            <h5 class="text-uppercase">Links</h5>

            <ul class="list-unstyled">
              <li>
                <a href="#!">Link 1</a>
              </li>
              <li>
                <a href="#!">Link 2</a>
              </li>
              <li>
                <a href="#!">Link 3</a>
              </li>
              <li>
                <a href="#!">Link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->


        </div>
        <!-- Grid row -->

      </div>
      <!-- Footer Links -->

      <!-- Copyright -->
      <div class="footer-copyright text-center py-3">© 2020 Copyright:
        <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
      </div>
      <!-- Copyright -->

    </footer>
    <!-- Footer -->

【讨论】：