html - 自定义响应网格列大小不正确大小

Question

好的。长期读者第一次海报。所以我一直在尝试创建一个自定义网格系统，这样我就不必一直依赖 bootstrap 或样板等框架。我已经让网格正常工作，但是，当 col-12x 位于另一个 col-12x 之上时。第一列在右边上仍然有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* 它是您的最大列数(如 bootstrap)，所以每个 .row 只能有一个(给定您当前的 CSS)你声明的地方:

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

在一个 .row 中有两个 col-12* 将使第一个 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>