Bootstrap：背景色100％的屏幕宽度？

我正试图在bootstrap中创建一个相当简单的网站。我希望每个部分都有自己的背景颜色，类似于这里所做的：https://flaticons.co/。你碰巧知道是否有一个类或CSS的样式，将允许背景100％宽度？Bootstrap：背景色100％的屏幕宽度？

<div id="main" class="container"> 
     <section class="row"> 
      <p class="col-md-4 col-sm-6" col-sm-push-7><img src="images/an_image.gif"></p> 
      <h1 class="col-md-8 col-sm-6" col-sm-pull-7>Some content...</h1> 
     </section> 

     <!-- ===== background colour wanted here 100% window width===== --> 
     <section id="about" class="row"> 
      <div> 
       <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
       <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p> 
      </div> 
     </section> 
    </div>

-----------此作品：

家伙！伙计们！

感谢这些答案。当bootstrap不涉及时，它们非常棒。当bootstrap涉及...这个工程。这么多的div :(但它工作的伟大

<div class="secondary"> 
    <section class="row container"> 
      <div class="row"> 
       <p class="col-md-4 col-sm-6" col-sm-push-7><img src="images/temp_riley.gif"></p> 
       <h1 class="col-md-8 col-sm-6" col-sm-pull-7>Hi. I'm Riley: a problem solving UX designer (and front-end developer) who is intrigued by change and loves a good challenge. </h1> 
      </div> 
    </section>

css: 

.secondary { 
    background: green; 
}

来源

2014-06-15 ACyclingMind

这就是你需要看像一个HTML页面的XML文档的层次结构。你的第一个div是内部“部分”的容器，对吧？为了在你的例子中为第二部分做一个特定的“100％宽度”（并且保持上面部分的样式正确），你需要看看把第二部分放在它自己的容器中（在当前容器的下面）然后您可以样式的新容器到100％的宽度，并具有背景色... – Kinnectus

若要使元件100％的CSS屏幕宽度，你可以使用以下命令：！

width: 100vw;

的vw代表视图宽度，这是新的CSS3。See here用于浏览器的兼容性（当前的浏览器几乎普遍支持它）。

来源

2014-06-15 22:15:52 ImOnALampshade

这是一个奇妙的把戏，有点比格，格更优雅，DIV我终于想通了！:)谢谢！ – ACyclingMind

在您的简单示例中，将每个部分和div的宽度设置为100％将在浏览器的窗口中扩展它们。这里是你展示在找什么，http://jsfiddle.net/MPQVu/小提琴，但在发挥其基本思想是：

.parent_div { width: 100%; } 

.child_div { width: 100%; }

来源

2014-06-15 22:32:28 steel

Bootstrap：背景色100％的屏幕宽度？

回答

相关问题