使用 css 网格围绕网格的边框答案

【问题标题】：borders around grids using css grids使用 css 网格围绕网格的边框
【发布时间】：2012-09-01 00:59:57
【问题描述】：

使用 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 为单位计算跨度的宽度 - 所以它们正在爆发。

【问题讨论】：

为了得到答案，最好提供一些您遇到问题的实际代码。对我来说，一个快速的盲目回答是你的第二个想法可能会奏效，你只需要确保你的包装元素上有正确的 css 来对抗floats 或positioned 孩子的爆发。对于浮点数，您通常可以使用float:left 或overflow:hidden。对于定位元素，您可以使用position:relative。
好的，我用一些代码编辑问题，谢谢。

标签： css frameworks grid

【解决方案1】：

所以我们不想要 px 宽度，我们想要 % 宽度。其他框架使用 %'s。哦。 bootstrap 流体使用 %'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%;
  }
 }

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

【讨论】：