首页 文章

使用css网格围绕网格边界

提问于
浏览
0

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

以引导程序为例 - 网格依赖于嵌套容器和行 . 将边框和填充应用于第一个容器会更改数学和垂直包含的div堆栈 - 网格中断 .

将第一个容器放在一个单独的包装div中并对包装div应用border和padding也不起作用 - 包含的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中的跨距宽度 - 因此它们正在突破 .

1 回答

  • 0

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

    这就是引导网格周围的一个方框 . 好极了 .

相关问题