自定义响应网格列大小未正确调整大小

Question

好的。长期读者第一次海报。所以我一直在尝试创建一个自定义网格系统，这样我就不必一直依赖诸如bootstrap 或样板文件之类的框架。我已经让网格工作了，但是当col-12x 高于另一个col-12x 时。第一列在right 上仍然有15px 或padding，并且某些列在一行最后一列的右侧没有padding。文本不会与相同列的中断相同。我附上了指向[JSFIDDLE][1] 的链接，因为S.O 出于某种原因不允许我输入css。

<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）只能有一个：

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

将两个col-12* 合为一个.row 将使第一个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>