부트 스트랩 : 배경색 100 % 화면 너비?

저는 부트 스트랩에 꽤 간단한 웹 사이트를 만들려고합니다. 각 섹션의 배경 색상은 여기에서 수행 한 것과 비슷합니다. https://flaticons.co/. 배경이 100 % 너비가 될 수있는 클래스 또는 CSS 스타일이 있는지 알고 있습니까?부트 스트랩 : 배경색 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>

-----------이 작동 :

얘들 아! 얘들 아!

답변 해 주셔서 감사합니다. 부트 스트랩이 포함되지 않은 경우에 유용합니다. 부트 스트랩이 관련되면 ... 작동합니다. 이렇게 많은 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

이입니다. 첫 번째 div는 내부의 "섹션"컨테이너입니다. 예제에서 두 번째 섹션의 특정 "100 % 너비"를 수행하려면 (위의 섹션에 대한 스타일을 올바르게 유지하십시오.) 두 번째 섹션을 현재 컨테이너의 아래쪽 (및 바깥 쪽)에 배치해야합니다. . 다음 새 컨테이너 스타일을 100 % 너비 및 배경색을 가질 수 있습니다 ... – Kinnectus

가 요소 100 % 다음 사용할 수있는 CSS의 화면 폭하려면!

width: 100vw;

vw에게 브라우저에서의 호환성을 위해 See here (현재 브라우저가 거의 보편적으로 지원합니다)

출처

2014-06-15 22:15:52 ImOnALampshade

이것은 div, div, div보다 더 멋진 멋진 트릭입니다. 나는 마침내 알아 냈습니다! :) THanks! – ACyclingMind

간단한 예제에서 각 섹션 및 div의 너비를 100 %로 설정하면 브라우저 창 전체에 걸쳐 펼쳐집니다. 여기 http://jsfiddle.net/MPQVu/, 무엇을 찾고 있는지 보여주는 바이올린은, 그러나 놀이에 기본적인 아이디어는 : 당신이 HTML 페이지와 같은 XML 문서의 계층 구조를 볼 필요가 어디

.parent_div { width: 100%; } 

.child_div { width: 100%; }

출처

2014-06-15 22:32:28 steel

부트 스트랩 : 배경색 100 % 화면 너비?

답변

관련 문제