Question

我试图在bootstrap中创建一个相当简单的网站。我希望每个部分都有自己的背景颜色，类似于此处所做的：https://flaticons.co/。您是否碰巧知道是否有类或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>

-----------这有效：

专家！人！

感谢您的回答。当引导不涉及时，它们非常适合。当涉及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

要使元素100％成为CSS中的屏幕宽度，您可以使用以下内容：

width: 100vw;

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

Answer 2

在您的简单示例中，将每个部分的宽度和div设置为100％将在浏览器的窗口中展开它们。这里有一个小提示，展示了你正在寻找的东西http://jsfiddle.net/MPQVu/，但是基本的想法是：

.parent_div { width: 100%; }

.child_div { width: 100%; }

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

2 个答案: