我已經在各處搜索答案。我正在使用來自semantic.gs的grid.less並且正常工作。我只是有一個問題，我的模板的一部分。我知道網格列默認添加了12個。但是，對於我的模板的一個特定部分，佈局不會擴展到整個屏幕的整個寬度。semantic.gs GRID - 有關列添加到12以上的問題

HTML 佈局是3周的div

<div id="about"> 
     <h3>About</h3> 

    ..... 

    </div> 

    <div id="contact"> 
     <h3>Contact</h3> 

     .... 
    </div> 


    <div id="locations"> 
     <h3>Locations</h3> 
     ....... 
    </div> 

</section><!-- #bottom-->

style.less

@import 「組件/ grid.less」; 爲了使用屏幕的整個寬度，我必須增加最後2個div的列數。

底部{

#about { 
.column(6); 
} 

#contact { 
    .column(4); 

} 

#locations { 
.column(4);

}

雖然，似乎現在加起來16列（6 + 4 + 4和我沒有改變默認@columns：12）。雖然瀏覽器中的顯示效果還不錯，但我想知道爲什麼我不能簡單地使用第（3）列;爲最後2個div。除非我缺少sthg，否則它看起來並不一致。我希望我能弄清楚爲什麼。

在此先感謝

來源

2015-01-06 SandyL

6 + 4 + 4 = 14，而不是16。我不明白爲什麼你最後的div，你不能使用列（3）？這樣做會發生什麼？

要了解網格系統，你應該檢查http://semantic.gs/examples/fixed/fixed.html

的網格系統，使用硬編碼的寬度。每行有12列960/12像素= 80像素（包括每邊10像素的邊距（給出2 x 10 = 20像素的裝訂線））。

網格要求您將行包裝在容器中。上面提到的例子使用了一個<div class="center"></div>容器。對於div.center容器代碼越少會：

// center the contents 
div.center { 
    width: ((@column-width + @gutter-width) * @columns)px;//960px by default 
    margin: 0 auto; 
    overflow: hidden; 
}

當你不使用的容器具有固定寬度，所有列將被並排顯示等，直到它們的寬度之和等於屏幕寬度（或視口的寬度）由於float:left。

來源

2015-01-07 13:16:05

semantic.gs GRID - 有關列添加到12以上的問題

底部{

回答

相關問題