使用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網格的網格邊界

回答

相關問題