css - Bootstrap : Background colour 100% screen width?

Question

我正在尝试在 Bootstrap 中创建一个相当简单的网站。我希望每个部分都有自己的背景颜色，类似于此处所做的:https://flaticons.co/ .您是否碰巧知道是否有允许背景为 100% 宽度的类或 css 样式？

<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;
}

Answer 1

要在 CSS 中使元素成为屏幕宽度的 100%，您可以使用以下代码:

width: 100vw;

vw 代 TableView 宽度。这是 CSS3 的新功能。 See here为了在浏览器中的兼容性(当前的浏览器几乎普遍支持它)。