CSS 在类似 Bootstrap 的网格中偏移

Question

我正在尝试在其桌面网格中重新创建 Bootstrap's offset，其中 class 如 .col-md-offset-3 通过 margin-left 创建偏移量。

出于某种原因，在 my attempt 中，此 CSS 选择器失败（即 div 未偏移）：

.col-offset-8 {margin-left ... }

但这两个都成功了：

div.col-offset-8 {margin-left ... }

col-4.col-offset-8 {margin-left ... } /*note: multiple class selectors, no space */

为什么 .col-offset-8 不能单独工作？

Here's my CodePen.

@media all and (min-width:760px) {
  .row {margin:0 auto;overflow:hidden;}
  .row > div {margin:10px;overflow:hidden;float:left;display:inline-block;}
  .row {width:960px;}
  .col-8 {width:620px} .col-4 {width:300px}
  .col-12 {width:940px} .col-6 {width:460px}
  .col-offset-8 {
    margin-left:650px; /* = col-8 + margins */
  }
}

/* for demo */
.row {background:#ccc}
.row > div {background:#eee; outline:1px solid #444}
p {font:24px/60px Arial;color:#000;text-align:center}

<div class="row">
  <div class="col-12">
    <p>col-12</p>
  </div>
</div>

<div class="row">
  <div class="col-4 col-offset-8">
    <p>col-4 offset-8</p>
  </div>
</div>

<div class="row">
  <div class="col-8">
    <p>col-8</p>
  </div>
  <div class="col-4">
    <p>col-4</p>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <p>col-12</p>
  </div>
</div>

Answer 1

它不起作用，因为选择器 .row > div 比 .col-offset-8 更 more specific。

更准确地说，.row > div 的特异性值为 11，而 .col-offset-8 的特异性值为 10。

因此，.row > div 中的 margin: 10px 正在覆盖 margin-left

您可以 increase the specifcity 选择器 .col-offset-8 到 .row .col-offset-8。 margin-left 将覆盖 margin: 10px.

Updated Example

.row .col-offset-8 {
  margin-left: 650px; /* = col-8 + margins */
}

对于它的价值，this is a nice tool 用于计算特异性。

CSS 在类似 Bootstrap 的网格中偏移

CSS offset in Bootstrap-like grid

html

css

grid

margin