使用CSS网格的网格边界

将边框和填充应用于包含网站的最佳方式是使用网格系统（如twitter-bootstrap）将div封装到网站？使用CSS网格的网格边界

使用引导例如 - 网格取决于在嵌套的容器和行内。对第1个容器应用边框和填充可以更改数学和包含的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>

，我想一个20像素填充，像素边框主要适用于包装。 Bootstrap计算px中跨度的宽度 - 以便它们爆发。

来源

2012-09-07 Will

为了得到答案，最好提供一些你遇到问题的实际代码。对我来说，一个盲目的答案应该是，你的第二个想法可能会起作用，你只需要确保你的包装元素上有正确的CSS来对抗'花车'或'定位'的孩子们爆发。对于浮点数，通常可以使用float：left或overflow：hidden。对于定位元素，您可以使用'position：relative'。 – Pebbl

好的，生病编辑一些代码的问题，谢谢。 – Will

所以我们不想要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>

然后制定出使用介质的容器的宽度查询

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

并且那周围引导格的盒子。好极了。

来源

2012-09-07 07:45:08 Will

使用CSS网格的网格边界

回答

相关问题