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％的屏幕寬度？

回答

相關問題