CSS 容器引导程序内的全宽背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32006761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
full width background color inside container bootstrap
提问by agis
I have this markup:
我有这个标记：
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</article>
And I want to apply to the "content" div a full width background color.
我想将全宽背景颜色应用于“内容”div。
How can I do this through CSS?
我怎样才能通过 CSS 做到这一点？
Here is a jsbinto show you exactly what I'm trying to do.
这是一个jsbin，可以准确地向您展示我正在尝试做什么。
回答by DavidDomain
You could use the .jumbotronclass for this purpose. Just make sure not to put it inside an element with .containerclass.
您可以.jumbotron为此目的使用该类。只要确保不要将它放在带有.container类的元素中。
So here is an example using .jumbotron.
所以这是一个使用.jumbotron.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin: 0;
}
.content {
background-color: green;
}
.jumbotron {
background-color: orange;
}
.no-left-right-padding {
padding-left: 0;
padding-right: 0;
}
@media screen and (min-width: 1200px) {
img {
width: 100%;
height: auto;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<img class="bg-featured img-responsive" src="http://placehold.it/1200x400"></img>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">Title</h1>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>回答by Magnus
I answered the same question here: Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
我在这里回答了同样的问题：Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
In summary, you simply add another element around the container, and style it as you like. It will cover the full width. A containerinside a container-fluidis not considered good practice.
总之，您只需在容器周围添加另一个元素，并根据需要设置样式。它将覆盖整个宽度。A containerinside acontainer-fluid不被认为是好的做法。
回答by pedrozopayares
Just create a full width wrap element (div, section, etc.). Then, use .container class for a responsive fixed width container:
只需创建一个全宽环绕元素（div、section 等）。然后，将 .container 类用于响应式固定宽度容器：
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="full-width"> /* ADD FULL WIDTH WRAP CLASS */
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
回答by Daybreak
Bootstrap .container class adds a left and right padding of 15px. Either use negative padding to fix it (padding-left: -15px; padding-right:-15px) or you can make a new .containerNew class in another css file and add these styles. For example in a file called myStyles.css do the following:
Bootstrap .container 类添加了 15px 的左右填充。要么使用负填充来修复它（padding-left: -15px; padding-right:-15px），或者你可以在另一个 css 文件中创建一个新的 .containerNew 类并添加这些样式。例如，在名为 myStyles.css 的文件中执行以下操作：
.containerNew {
background-color: green;
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}<div class="containerNew">
<div class="row">
<div class="col-md-12">
<!-- Your Content Here -->
</div>
</div>
</div>