自定义响应格栅柱尺寸没有正确确定

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>