Question

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

<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;＆＃34; hack＆＃34;正在搞乱我试图在我的网站中加入的一些第三方项目的结构，包括JavaScript轮播。那么有更好的方法吗？

Answer 1

你认为拥有巨大的负利润并不是一个好主意。我们不应该只有一个RewriteBase来包装所有内容，而是应该在每个部分中都有.container个。

.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>

Updated fiddle

如何在没有这个的情况下在整个屏幕上制作水平条带＆＃34; hack＆＃34;

1 个答案: