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>

我想将“content”div应用于全宽背景色。

我怎么能通过CSS做到这一点？

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

Answer 1

您可以使用.jumbotron类来实现此目的。请确保不要将其放在.container类的元素中。

Jumbotron

所以这是一个使用.jumbotron的例子。

＆＃13;

@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;
  }

}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

Answer 4

Bootstrap .container类添加15px的左右填充。使用负填充来修复它（padding-left：-15px; padding-right：-15px）或者你可以在另一个css文件中创建一个新的.containerNew类并添加这些样式。例如，在名为myStyles.css的文件中，执行以下操作：

＆＃13;

.containerNew {
  background-color: green;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0px;
  padding-right: 0px;
}

＆＃13;

<div class="containerNew">
  
  <div class="row">
    
    <div class="col-md-12">
      
        <!-- Your Content Here -->
      
    </div>
    
  </div>
  
</div>

＆＃13;

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

4 个答案: