css - 使用 css 网格围绕网格的边框

Question

使用 twitter-bootstrap 等网格系统将边框和填充应用于包含站点的 div 到站点的最佳方法是什么？

例如，使用引导程序 - 网格取决于嵌套容器和行内。对第一个容器应用边框和填充会改变数学和包含的 div 垂直堆叠 - 网格中断。

将第一个容器放在单独的 wrap div 中并将边框和填充应用于 wrap 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>    

我想在主包装器上应用 20 像素的填充、1 像素的边框。Bootstrap 以 px 为单位计算跨度的宽度 - 所以它们正在爆发。

Answer 1

所以我们不想要 px 宽度，我们想要 % 宽度。其他框架使用 %'s。哦。自举流体使用 %'s

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

然后使用媒体查询计算出容器的宽度

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

那是引导网格周围的一个盒子。耶。