Question

我正在尝试在其桌面网格中重新创建Bootstrap's offset，.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为more specific而不是.col-offset-8。

更确切地说，.row > div的特定值为11，而.col-offset-8的值为10.

因此，来自margin: 10px的{{1}}会覆盖.row > div

您可以从margin-left到.col-offset-8选择increase the specifcity。执行.row .col-offset-8将覆盖margin-left。

Updated Example

margin: 10px

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

类似Bootstrap的网格中的CSS偏移量

1 个答案: