如何在twitter引导的容器内有100％宽度的背景？ [英] How to have a 100% width background inside container of twitter bootstrap?

问题描述

我目前正在建立一个WordPress网站，我需要一个div的100％宽度的背景（css颜色，没有图片）。我的div在一个容器内，我不能修改html。所以，我想知道是否有任何方式与CSS来做到这一点。我已经尝试了填充+边距黑客，但它没有奏效。

HTML：

 < div class =container> ; 
< div class =row-fluid> 
< div class =main span12> 
< div class =row-fluid blue> <！ - 这是需要背景的div  - > 
< div class =span4>某些内容< / div> 
< div class =span4>某些内容< / div> 
< div class =span4>某些内容< / div> 
< / div> 
< div class =row-fluid> 
< div class =span12>一些其他内容，不需要背景< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

非常感谢任何帮助。我试过这个： http://www.sitepoint.com/css-extend

解决方案

基于这篇文章，从CSS技巧（ 全宽浏览器栏 ）。 p>

HTML

 < div class = 容器 > 
< 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纯黑色; 
} 
 .level {
 height：100px; 
背景：＃bada55; 
} 
 
 .purple {
 position：relative; 
背景：＃663399; 
} 
 
 .purple：before，
 .purple：after {
 content：; 
位置：绝对; 
背景：＃663399; / *匹配背景* / 
 top：0; 
 bottom：0; 
 width：9999px; / *一些巨大的宽度* / 
} 
 .purple：之前{
右：100％; 
} 
 .purple：在{
 left：100％; 
} 
  

Codepen Demo

支持应该是IE8&上涨

I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was wondering if there was any way with css to do this. I have already tried the padding+margin hack, but it didn't work.

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>

Any help is much appreciated. I tried this one : http://www.sitepoint.com/css-extend-full-width-bars/ but it didn't work.

解决方案

Based on this article from CSS Tricks (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

Support should be IE8 & up

这篇关于如何在twitter引导的容器内有100％宽度的背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！