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

问题描述

我尝试在桌面网格中重新创建，其中类似

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

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

因此， margin：10px from .row> div 会覆盖空白余量

您可以 到 .row .col-offset-8 。执行 margin-left 会覆盖 margin：10px 。

  .row .col-offset-8 {
 margin-left：650px; / * = col-8 +保证金* / 
} 
  

a href =http://specificity.keegan.st/ =nofollow>这是计算特异性的好工具。

I'm trying to recreate Bootstrap's offset in its desktop grid whereby a class like .col-md-offset-3 creates an offset via margin-left .

For some reason, in my attempt, this CSS selector fails (i.e. the div is not offset):

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

But both of these succeed:

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

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

Why won't .col-offset-8 work by itself?

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>

解决方案

It's not working because the selector .row > div is more specific than .col-offset-8.

More precisely, .row > div has a specifity value of 11 whereas .col-offset-8 has a value of 10.

Because of this, the margin: 10px from .row > div is overwriting the margin-left

You could increase the specifcity of your selector from .col-offset-8 to .row .col-offset-8. In doing to margin-left will overwrite margin: 10px.

Updated Example

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

For what it's worth, this is a nice tool for calculating specificity.

这篇关于类似Bootstrap的网格中的CSS偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！