如何在没有这种“hack”的情况下在全屏上制作水平条答案

【问题标题】：How to make horizontal strips across full screen without this "hack"如何在没有这种“hack”的情况下在全屏上制作水平条
【发布时间】：2015-11-02 16:34:57
【问题描述】：

我正在为网站构建一个主题，我想要的行为是将主要内容包含在水平居中的 div 和 max-width 中，除了偶尔有彩色背景延伸整个宽度的行屏幕（这是许多现代网站都有的外观类型）。我也在使用引导程序，我不知道是否有内置的类可以让我做这种事情。但我一直在做的是像

<div class="container">
   <div class="row">
       <p>Here's a row that stays contained in the container</p>
   </div>
   <div class="row expand-full-width">
       <div class="container">
           <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>          
       </div>
   </div/>
   <div class="row">
       <p>Here's a row that stays contained in the container</p>
   </div>
   <div class="row expand-full-width">
       <div class="container">
           <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>          
       </div>
   </div>
</div>

.container { width: 200px; margin: 0 auto; }
    .row { padding: 15px 5px; }
    .expand-full-width { margin-left: -1000000px; margin-right: -1000000px; background:  yellow; }

（小提琴：http://jsfiddle.net/pjpuLcat/）

但我想知道是否有更好的方法来做到这一点，因为margin-left: -somebignumber; margin-right: -somebignumber;“hack”正在搞乱我试图合并到我的网站中的一些第 3 方项目的结构，包括 JavaScript 轮播。那么有没有更好的方法呢？

【问题讨论】：

标签： html twitter-bootstrap css responsive-design

【解决方案1】：

您绝对正确地认为拥有巨大的负利润率不是一个好主意。您应该在每个部分中使用 .containers，而不是使用一个包含所有内容的 .container。

<div class="row">
    <div class="container">
        <p>Here's a row that stays contained in the container</p>
    </div>
</div>
<div class="row expand-full-width">
    <div class="container">
        <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>          
    </div>
</div>
<div class="row">
    <div class="container">
        <p>Here's a row that stays contained in the container</p>
    </div>
</div>
<div class="row expand-full-width">
    <div class="container">
        <p>Here's a row that is contained in the center but has a background extended all the way across the screen horizontally</p>          
    </div>
</div>

.container { width: 200px; margin: 0 auto; }
    .row { padding: 15px 5px; }
    .expand-full-width { background:  yellow; }

Updated fiddle

【讨论】：