html - 如何在 twitter bootstrap 容器内设置 100% 宽度的背景？

Question

我目前正在构建一个 wordpress 网站，我需要一个 100% 宽度的背景(css 颜色，无图像)作为 div。我的 div 在容器内，我无法修改 html。所以，我想知道是否有任何方法可以使用 css 来做到这一点。我已经尝试过 padding+margin hack，但没有用。

HTML:

<div class="container">
 <div class="row-fluid">
   <div class="main span12">
       <div class="row-fluid blue"> <!--this is the div that needs the background-->
          <div class="span4">some content</div>
           <div class="span4">some content</div>
          <div class="span4">some content</div>
          </div>
       <div class="row-fluid">
           <div class="span12"> some other content, doesn't need the background</div>
       </div>
     </div>
  </div>
  </div>

非常感谢任何帮助。我试过这个:http://www.sitepoint.com/css-extend-full-width-bars/但它没有用。

Answer 1

基于 CSS 技巧 ( Full Width Browser Bars ) 中的这篇文章。

HTML

<div class="container">
  <div class="level"></div>
  <div class="level purple"></div>
  <div class="level"></div>
</div>

CSS

html, body {
    overflow-x: hidden;
}
.container {
  width:960px;
  margin: 0  auto;
  border:1px solid black;
}
.level {
  height:100px;
  background: #bada55;
}

.purple {
  position: relative;
  background: #663399;
}

.purple:before, 
.purple:after {
  content: "";
  position: absolute;
  background: #663399;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
} 
.purple:before {
  right: 100%; 
}
.purple:after {
  left: 100%;
}

Codepen Demo

应支持 IE8 及更高版本