使用css网格的网格周围的边框

使用网格系统（如twitter引导）将包含站点包装div的边框和填充应用于站点的最佳方法是什么

例如，使用引导-网格依赖于嵌套的容器和行。对第一个容器应用边框和填充将垂直更改数学和包含的div堆栈-网格中断

将第一个容器放置在单独的包装div中，并对包装div应用边框和填充也不起作用-包含的div会从容器中分离出来

因此，加价的一个例子是：

<div class=' main'>
    <div class='container'>
      <div class='row'>
        <div class='span12'>              
            <h1>Demo</h1>    
            <div class='row'>
              <section class='span8'>
                blah blah
              </section>
              <aside class='row'>
                links n stuff
              </aside>    
             </div>
         </div>
      </div>
</div>    

演示
废话
链接n东西

---

我想在主包装上加一个20像素的填充，1像素的边框。Bootstrap以px的形式计算跨距的宽度，因此它们正在突破

所以我们不想要px宽度，我们想要%宽度。其他框架使用%的。哦引导流使用%的

<div class=' main'>
<div class='container-fluid'>
  <div class='row-fluid'>
    <div class='span12'>              
        <h1>Demo</h1>    
        <div class='row-fluid'>
          <section class='span8'>
            blah blah
          </section>
          <aside class='span3'>
            links n stuff
          </aside>    
         </div>
     </div>
  </div>
</div>    

---

这是一个围绕引导网格的框。是的。

为了得到答案，最好提供一些您遇到问题的实际代码。但对我来说，一个快速的盲目回答是，你的第二个想法可能会奏效，你只需要确保你的包装元素上有正确的css来对抗

浮动

或

定位

儿童爆发。对于浮动，通常可以使用

float:left

或

overflow:hidden

。对于定位元素，您可以使用

position:relative

。好的，我将用一些代码编辑问题，谢谢。

.main{
  width:1210px;
  margin:20px auto;

  border-radius:3px;
  border:1px solid #eee;
  box-shadow: 2px 2px 8px rgba(6,6,6,0.5);
}


@media (max-width: 1210px) { 
 .main{
    width:80%;
  }
 }