我如何將骨架CSS樣板分成5列？

Question

我想從骷髏CSS樣板從http://getskeleton.com/ 這是我第一次設計和使用960gs模板腳本，我完全沒有得到它。

根據一些教程，我知道頁面的寬度由16個列單位組成。例如，您可以將您的頁面爲十個單元柱和六單元柱：

我把下面的代碼從骨架layout.css中直線距離：

/* Base Grid */ 
.container .one.column, 
.container .one.columns      { width: 40px; } 
.container .two.columns      { width: 100px; } 
.container .three.columns     { width: 160px; } 
.container .four.columns     { width: 220px; } 
.container .five.columns     { width: 280px; } 
.container .six.columns      { width: 340px; } 
.container .seven.columns     { width: 400px; } 
.container .eight.columns     { width: 460px; } 
.container .nine.columns     { width: 520px; } 
.container .ten.columns      { width: 580px; } 
.container .eleven.columns     { width: 640px; } 
.container .twelve.columns     { width: 700px; } 
.container .thirteen.columns    { width: 760px; } 
.container .fourteen.columns    { width: 820px; } 
.container .fifteen.columns     { width: 880px; } 
.container .sixteen.columns     { width: 940px; } 

.container .one-third.column    { width: 300px; } 
.container .two-thirds.column    { width: 620px; } 

的問題是，我想將我的頁面分成5個部分（當然有保證金）... 但是如何？我可以使用三列5次，但總數可達15列。有沒有辦法做到這一點？

Answer 1

這些是我找到的最好的骷髏教程系列。他們真的幫了我：https://www.youtube.com/watch?v=QFYkSqBvCAs

但是，如果你去了Skeleton主頁，那裏有一個網格系統演示。只要查看源代碼，它給你：

<div class="five columns alpha">Five</div> 

希望這有助於:)

Answer 2

您將無法從標準骨骼1.2版獲得五列。但你可以添加一些行skeleton.css：

/* Base Grid */ 
.container .one.column, 
.container .one.columns      { width: 40px; } 
.container .two.columns      { width: 100px; } 
.container .three.columns     { width: 160px; } 
.container .four.columns     { width: 220px; } 
.container .five.columns     { width: 280px; } 
.container .six.columns      { width: 340px; } 
.container .seven.columns     { width: 400px; } 
.container .eight.columns     { width: 460px; } 
.container .nine.columns     { width: 520px; } 
.container .ten.columns      { width: 580px; } 
.container .eleven.columns     { width: 640px; } 
.container .twelve.columns     { width: 700px; } 
.container .thirteen.columns    { width: 760px; } 
.container .fourteen.columns    { width: 820px; } 
.container .fifteen.columns     { width: 880px; } 
.container .sixteen.columns     { width: 940px; } 

.container .one-third.column    { width: 300px; } 
.container .two-thirds.column    { width: 620px; } 
.container .one-fifth.column    { width: 176px; } /* <--- Right here */ 

跳過了這裏：

@media only screen and (min-width: 768px) and (max-width: 959px) { 
    .container         { width: 768px; } 
    .container .column, 
    .container .columns       { margin-left: 10px; margin-right: 10px; } 
    .column.alpha, .columns.alpha    { margin-left: 0; margin-right: 10px; } 
    .column.omega, .columns.omega    { margin-right: 0; margin-left: 10px; } 
    .alpha.omega        { margin-left: 0; margin-right: 0; } 

    .container .one.column, 
    .container .one.columns      { width: 28px; } 
    .container .two.columns      { width: 76px; } 
    .container .three.columns     { width: 124px; } 
    .container .four.columns     { width: 172px; } 
    .container .five.columns     { width: 220px; } 
    .container .six.columns      { width: 268px; } 
    .container .seven.columns     { width: 316px; } 
    .container .eight.columns     { width: 364px; } 
    .container .nine.columns     { width: 412px; } 
    .container .ten.columns      { width: 460px; } 
    .container .eleven.columns     { width: 508px; } 
    .container .twelve.columns     { width: 556px; } 
    .container .thirteen.columns    { width: 604px; } 
    .container .fourteen.columns    { width: 652px; } 
    .container .fifteen.columns     { width: 700px; } 
    .container .sixteen.columns     { width: 748px; } 

    .container .one-third.column    { width: 236px; } 
    .container .two-thirds.column    { width: 492px; } 
    .container .one-fifth.column    { width: 137.6px; } /* <--- And Right der */ 
} 

我順便說一句省略了一些行。然後只需投入其中之一：

並做完了，會在不久的將來添加實例。就我個人而言，我認爲5列網格太狹窄，並儘可能遠離4列以上的任何東西。

Answer 3

想我會更新我的解決方案。

對於基於百分比寬度的新Skeleton框架（當前爲V2.0.4），我正在進行試驗，發現添加了這個對我有用。

.col-5.columns { 
    width: 16.3333333333%; 
    padding-right: 10px; 
} 

到位的正常列類如中只需添加這，

<div class="col-5 columns"> 

的填充是隻爲我的具體情況的偏好。

儘管如此，還沒有發現任何問題。