【发布时间】：2020-11-23 22:32:25
【问题描述】：
我的网页有如下的 html 代码，我在最后一部分有一个容器，里面有一个 jumbotron。我希望这个容器显示在整个屏幕上，并且目前在它周围有一个边距。如何消除最后一个 id 为 footerContainer 的容器的边距？
{% extends 'indexBase.html' %}
{% load static %}
{% block coverContent %}
<div class="jumbotron jumbotron-fluid" id = "header">
<div class="container-fluid">
<h1 class="display-4">Hidden Dimsum</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor cumque perferendis consequatur minima quaerat placeat, tempora rerum iusto similique quia illum necessitatibus praesentium voluptate voluptatem possimus esse iure quidem dignissimos!</p>
</div>
</div>
{% endblock %}
{% block mainNavContent %}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<a href='#'>
<img class="card-img-top" src={% static 'media/HiddenDimsumNytorvFacade.jpg' %} alt="Hidden Dimsum Nytorv image">
</a>
<div class="card-body">
<h5 class="card-title">Hidden Dimsum Nytorv </h5>
<p class="card-text">Our main dimsum house located at heart of Copenhagen. This is the place where
dimsum started.
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Book table</a></li>
</ul>
<a href="#" class="btn btn-primary">More Info</a>
</p>
</div>
</div>
<div class="card">
<a href="#">
<img class="card-img-top" src={% static 'media/HiddenDimsumByNight.jpg' %} alt="Hidden Dimsum By Night">
</a>
<div class="card-body">
<h5 class="card-title">Hidden Dimsum by Night</h5>
<p class="card-text">Late night dimsum and Hongkong street food with Asian beers. A night has different shades!</p>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Opening Hours</a></li>
</ul>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
</div>
<div class="card">
<a href="#">
<img class="card-img-top" src={% static 'media/HiddenDimsum2900Facade.jpg' %} alt="Hidden Dimsum Strandvejen 163, 2900 Hellerup">
</a>
<div class="card-body">
<h5 class="card-title">Hidden Dimsum 2900</h5>
<p class="card-text">Dimsum takeaway. Order your dimsum dinner and pick it up at Hidden Dimsum 2900, Strandvejen 163, 2900 Hellerup.</p>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Order takeaway online></a></li>
<li><a href="#">Order takeaway over phone</a></li>
<li><a href="#">Opening hours</a></li>
</ul>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div>
<div class="card">
<a href="#">
<img class="card-img-top" src={% static 'media/DimsumBox.jpg' %} alt="Dimsum Box">
</a>
<div class="card-body">
<h5 class="card-title">Dimsum Box</h5>
<p class="card-text">A box of dimsum delivered to your front door with instructions on how to warm up. Dimsum at your convenience!</p>
<a href="#" class="btn btn-primary">Order</a>
</div>
</div>
</div>
{% endblock %}
{% block landingPageFooter %}
<div class="jumbotron jumbotron-fluid" id="footerJumbotron">
<div class="container-fluid" id="footerContainer">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
{% endblock %}
和css
#header {
text-align: center;
background: url("media/cover.jpg") no-repeat center center fixed;
background-size: cover;
justify-content: center;
color: white;
}
body {
background-color: #d48498;
}
.p-2 {
font-size : 50px;
font-weight : bold;
}
a > img {width : 500px;}
#footerJumbotron {
margin-top : 16px;
margin-left: 0px;
margin-right: 0px;
}
#footerContainer {
margin: 0px;
max-width:100%;
}
我需要 #footerContainer 以全屏宽度呈现，我尝试在我的 css 中将边距设置为 0px。我的页脚容器中仍然存在边距。在这种情况下，将 max-width 设置为 100% 似乎也没有帮助。
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4