英文:
My footer does not take the whole length of the page - Bootstrap
问题
我知道这个问题已经被问过多次，但我没有找到适合我的解决方案，我尝试按照这个解决方案上指定的方法使用container-fluid，但似乎不起作用。
一切都进行得很顺利，但当我添加我的页脚时，它并未占据整个页面或整个行的长度，这是由container-fluid的填充引起的。
这里是代表问题的图片：
正如您所看到的，边框没有完全占据整个长度
这是当我从包含我的主内容的container-fluid中删除填充时的照片：
正如您所看到的，出现了水平溢出
因此，我的问题是，我是否需要担心修复溢出问题，还是将页脚放在整个长度上？我不知道应该采取哪种方法！
我的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>
英文:
I know that the question has already been asked several times, but I did not find any solution suited to my case, I tried to put a container-fluid as specified on this solution, but it does not seem to work.
Everything is going well, but when I add my footer, it does not take the whole length of the page, or of the row, there are padding caused by that of the container-fluid.
Here is a picture representing the problem :
As you can see, the borders do not complete the entire length
Here is a photo of when I remove the padding from my container-fluid which includes all of my main :
As you can see, a overflow-x appears
So my question is, do I have to worry about fixing the overflow problem, or putting my footer on the whole length ? I don't know which track should I take !
My HTML footer :
<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>
答案1
得分: 2
**解决方案：**
我的页脚位于一个container-fluid中，只需将它移到外面，并将container-fluid添加到我的页脚本身：
```html
<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">免费订阅电子报：</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">我们绝不分享您的信息。</small>
</div>
<button type="submit" class="btn btn-primary">确认</button>
</form>
</div>
<div class="col-md-6">
<a href="">法律声明</a>
</div>
</div>
</div>
</div>
</footer>
<details>
<summary>英文:</summary>
**Solution :**
My footer was in a container-fluid, it was enough to bring it out of there and to add a container-fluid to my footer itself :
```html
<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
得分: 0
以下是代码的翻译部分：
<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 -->
英文:
The code gives the whole length footer of the page
<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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论