容器引导程序内的全宽背景颜色答案

【问题标题】：full width background color inside container bootstrap容器引导程序内的全宽背景颜色
【发布时间】：2016-09-05 18:13:15
【问题描述】：

我有这个标记：

<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>

我想为“内容”div 应用全宽背景色。

如何通过 CSS 做到这一点？

这是一个jsbin，向您展示我正在尝试做的事情。

【问题讨论】：

使用.content { background-color: green; }。
正如您在我的示例中看到的，我已经这样做了，但它并没有使它成为屏幕的全宽。
您正在尝试做的事情的图像会更有帮助。我没有从演示中得到它。
stackoverflow.com/questions/28565976/…
@agis 试试：.content { margin-left: -45px; margin-right: -45px }.

标签： css twitter-bootstrap

【解决方案1】：

您可以为此目的使用.jumbotron 类。只要确保不要将其放在具有 .container 类的元素中即可。

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>

【讨论】：

请记住 Booststrap Docs cmets：“请注意，由于填充等原因，这两个容器都不能嵌套”。
这就是我使用.jumbotron 类给出第二个示例的原因。我删除了第一个带有嵌套容器元素的示例。感谢您的提示。 ;)

【解决方案2】：

我在这里回答了同样的问题：Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

总而言之，您只需在容器周围添加另一个元素，并根据需要设置样式。它将覆盖整个宽度。 container 内的 container-fluid 不是好的做法。

【讨论】：

【解决方案3】：

只需创建一个全宽环绕元素（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>

【讨论】：

【解决方案4】：

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>

【讨论】：