自定义响应格栅柱尺寸没有正确确定
好的。长时间读者首次海报。所以我一直在尝试创建一个定制的网格系统，所以我不必依赖于框架，例如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>
我有一种感觉，它对于这两件事情都是一样的问题，但它让我发疯。任何帮助将不胜感激。
因为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>确定这非常有意义，谢谢。最后一件事。我原本以为它必须处理最后一种类型的填充。除了12行co-1 *之外，它适用于所有应用程序。在第一行的最后一列中，您会注意到该列比其他列大10px。如果我从最后一个类型中删除填充，它似乎适合形状。我真的不能删除，但。所以我很茫然。 ：/ –
我不明白你的问题 – dippas
所以如果有一行有12个col-1 *在其中。由于最后一个类，最后一个col似乎有10个额外的填充像素。但这似乎只发生在移动媒体查询之前。 /*列属性选择器*/ [class * ='col-'] {position：relative;向左飘浮; padding-right：10px; min-height：1px; } 如果我删除填充整个网格当然打破。但我无法弄清楚为什么它会添加额外的填充，但不保留与其他列相同的形状。 –
我没有看到小提琴链接 – ZimSystem