Question

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

使用bootstrap例如 - 网格取决于嵌套容器和行。将边框和填充应用于第一个容器会更改数学和垂直包含的div堆栈 - 网格中断。

将第一个容器放在一个单独的包装div中并使用border＆amp;填充到包装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 px填充，1px边框。 Bootstrap计算px中跨距的宽度 - 因此它们正在突破。

Answer 1

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

这就是引导网格周围的一个方框。耶。

使用css网格围绕网格边界

1 个答案: