自定義響應格柵柱尺寸沒有正確確定

Question

好的。長時間讀者首次海報。所以我一直在嘗試創建一個定製的網格系統，所以我不必依賴於框架，例如bootstrap或樣板。我有網格工作，但是，當一個col-12x高於另一個col-12x。第一列在right上仍有15px的padding，並且某些列在最後一列的右側沒有padding。文本不會像對於相同的列一樣打破。由於S.O不會讓我因爲某些原因放入css，所以我附上了[JSFIDDLE][1]的鏈接。

<div class="grid-fw"> 
    <div class="row"> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    <div class="col-1xs"><p>col-1</p></div> 
    </div> 
    <div class="row"> 
    <div class="col-6xs"><p>col-6</p></div> 
    <div class="col-4xs"><p>col-4</p></div> 
    <div class="col-2xs"><p>col-2</p></div> 
    </div> 
    <div class="row"> 
    <div class="col-6xs col-8lg"> 
     <div class="col-8xs"><p>col-8</p></div> 
     <div class="col-4xs"><p>col-4</p></div> 
    </div> 
    <div class="col-6xs col-4lg"><p>col-8</p></div> 
    </div> 
    <div class="row"> 
    <div class="col-4xs"><p>col-4</p></div> 
    <div class="col-4xs"><p>col-4</p></div> 
    <div class="col-4xs"><p>col-4</p></div> 
    </div> 
    <div class="row"> 
    <div class="col-12xs"><p>col-12</p></div> 
    <div class="col-12xs"><p>col-12</p></div> 
    </div> 
</div> 

我有一種感覺，它對於這兩件事情都是一樣的問題，但它讓我發瘋。任何幫助將不勝感激。

Answer 1

因爲col-12*它的列（如自舉）你的最大＃，所以你只能有一個每個.row（鑑於你目前的CSS），您的狀態：有兩個col-12*在一個.row

/* Floats last ".col-" to the right */ 
[class*='col-']:last-of-type { padding-right: 0; } 

將第一col-12*有默認padding-right:10px爲你的國家，在這裏

/* Column attribute selector */ 
[class*='col-'] { position: relative; float: left; padding-right: 10px; min-height: 1px; } 

片段

/* Grid Container */ 
 

 
.grid, 
 
.grid-fw { 
 
    padding: 15px; 
 
    margin: 0 auto; 
 
} 
 
/* Phones */ 
 

 
@media (min-width: 420px) { 
 
    .grid { 
 
    width: 400px; 
 
    } 
 
} 
 
/* Mobile */ 
 

 
@media (min-width: 768px) { 
 
    .grid { 
 
    width: 750px; 
 
    } 
 
} 
 
/* Tablet */ 
 

 
@media (min-width: 992px) { 
 
    .grid { 
 
    width: 970px; 
 
    } 
 
} 
 
/* Desktop */ 
 

 
@media (min-width: 1200px) { 
 
    .grid { 
 
    width: 1170px; 
 
    } 
 
} 
 
/* Clearfix */ 
 

 
.row:after, 
 
.row:before { 
 
    content: ""; 
 
    display: table; 
 
    clear: both !important; 
 
} 
 
/* Column attribute selector */ 
 

 
[class*='col-'] { 
 
    position: relative; 
 
    float: left; 
 
    padding-right: 10px; 
 
    min-height: 1px; 
 
} 
 
/* Floats last ".col-" to the right */ 
 

 
[class*='col-']:last-of-type { 
 
    padding-right: 0; 
 
} 
 
/* Phones Grid Columns */ 
 

 
@media only screen and (max-width: 420px) { 
 
    [class*='col-'] { 
 
    width: 100%; 
 
    padding-right: 0; 
 
    } 
 
} 
 
/* Grid Columns Mobile First */ 
 

 
@media (min-width: 321px) { 
 
    .col-1xs { 
 
    width: 8.33333333%; 
 
    } 
 
    .col-2xs { 
 
    width: 16.66666667%; 
 
    } 
 
    .col-3xs { 
 
    width: 25%; 
 
    } 
 
    .col-4xs { 
 
    width: 33.33333333%; 
 
    } 
 
    .col-5xs { 
 
    width: 41.66666667%; 
 
    } 
 
    .col-6xs { 
 
    width: 50%; 
 
    } 
 
    .col-7xs { 
 
    width: 58.33333333%; 
 
    } 
 
    .col-8xs { 
 
    width: 66.66666667%; 
 
    } 
 
    .col-9xs { 
 
    width: 75%; 
 
    } 
 
    .col-10xs { 
 
    width: 83.33333333%; 
 
    } 
 
    .col-11xs { 
 
    width: 91.66666667%; 
 
    } 
 
    .col-12xs { 
 
    width: 100%; 
 
    } 
 
} 
 
/* Tablet Grid Columns Mobile First */ 
 

 
@media (min-width: 768px) { 
 
    .col-1sm { 
 
    width: 8.33333333%; 
 
    } 
 
    .col-2sm { 
 
    width: 16.66666667%; 
 
    } 
 
    .col-3sm { 
 
    width: 25%; 
 
    } 
 
    .col-4sm { 
 
    width: 33.33333333%; 
 
    } 
 
    .col-5sm { 
 
    width: 41.66666667%; 
 
    } 
 
    .col-6sm { 
 
    width: 50%; 
 
    } 
 
    .col-7sm { 
 
    width: 58.33333333%; 
 
    } 
 
    .col-8sm { 
 
    width: 66.66666667%; 
 
    } 
 
    .col-9sm { 
 
    width: 75%; 
 
    } 
 
    .col-10sm { 
 
    width: 83.33333333%; 
 
    } 
 
    .col-11sm { 
 
    width: 91.66666667%; 
 
    } 
 
    .col-12sm { 
 
    width: 100%; 
 
    } 
 
} 
 
/* Laptop Grid Columns */ 
 

 
@media (min-width: 992px) { 
 
    .col-1md { 
 
    width: 8.33333333%; 
 
    } 
 
    .col-2md { 
 
    width: 16.66666667%; 
 
    } 
 
    .col-3md { 
 
    width: 25%; 
 
    } 
 
    .col-4md { 
 
    width: 33.33333333%; 
 
    } 
 
    .col-5md { 
 
    width: 41.66666667%; 
 
    } 
 
    .col-6md { 
 
    width: 50%; 
 
    } 
 
    .col-7md { 
 
    width: 58.33333333%; 
 
    } 
 
    .col-8md { 
 
    width: 66.66666667%; 
 
    } 
 
    .col-9md { 
 
    width: 75%; 
 
    } 
 
    .col-10md { 
 
    width: 83.33333333%; 
 
    } 
 
    .col-11md { 
 
    width: 91.66666667%; 
 
    } 
 
    .col-12md { 
 
    width: 100%; 
 
    } 
 
} 
 
/* Desktop Grid Columns */ 
 

 
@media (min-width: 1200px) { 
 
    .col-1lg { 
 
    width: 8.33333333%; 
 
    } 
 
    .col-2lg { 
 
    width: 16.66666667%; 
 
    } 
 
    .col-3lg { 
 
    width: 25%; 
 
    } 
 
    .col-4lg { 
 
    width: 33.33333333%; 
 
    } 
 
    .col-5lg { 
 
    width: 41.66666667%; 
 
    } 
 
    .col-6lg { 
 
    width: 50%; 
 
    } 
 
    .col-7lg { 
 
    width: 58.33333333%; 
 
    } 
 
    .col-8lg { 
 
    width: 66.66666667%; 
 
    } 
 
    .col-9lg { 
 
    width: 75%; 
 
    } 
 
    .col-10lg { 
 
    width: 83.33333333%; 
 
    } 
 
    .col-11lg { 
 
    width: 91.66666667%; 
 
    } 
 
    .col-12lg { 
 
    width: 100%; 
 
    } 
 
} 
 
/* Removes padding behaviour on widths */ 
 

 
*, 
 
*:after, 
 
*:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
/* Clearfix for Nested Rows */ 
 

 
.clearfix { 
 
    clear: both; 
 
} 
 
/* Show Columns */ 
 

 
[class*='col-'] > p { 
 
    background-color: #004d81; 
 
    padding: 10px; 
 
    border-radius: 4px; 
 
    margin-bottom: 10px; 
 
    font-size: 0.8rem; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<div class="grid-fw"> 
 
    <div class="row"> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    <div class="col-1xs"> 
 
     <p>col-1</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-6xs"> 
 
     <p>col-6</p> 
 
    </div> 
 
    <div class="col-4xs"> 
 
     <p>col-4</p> 
 
    </div> 
 
    <div class="col-2xs"> 
 
     <p>col-2</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-6xs col-8lg"> 
 
     <div class="col-8xs"> 
 
     <p>col-8</p> 
 
     </div> 
 
     <div class="col-4xs"> 
 
     <p>col-4</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-6xs col-4lg"> 
 
     <p>col-8</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-4xs"> 
 
     <p>col-4</p> 
 
    </div> 
 
    <div class="col-4xs"> 
 
     <p>col-4</p> 
 
    </div> 
 
    <div class="col-4xs"> 
 
     <p>col-4</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-12xs"> 
 
     <p>col-12</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-12xs"> 
 
     <p>col-12</p> 
 
    </div> 
 
    </div> 
 
</div>