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

Question

我有这个标记:

<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,向您展示我正在尝试做的事情.

Answer 1

您可以将.jumbotron此类用于此目的.只要确保不要将它放在带有.container类的元素中.

超大屏幕

所以这是一个使用的例子.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>

Answer 2

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

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