类似Bootstrap的网格中的CSS偏移量 [英] CSS offset in Bootstrap-like grid

问题描述

我尝试在桌面网格中重新创建 Bootstrap的偏移量，其中类似 .col-md-offset-3 通过 margin-left 创建一个偏移量。

出于某种原因，在我的尝试，这个CSS选择器失败（即div不被抵消）：

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

但这两个都成功了：

  div.col-offset-8 {margin-left ...} 
 
 col-4.col-offset-8 {margin -left ...} / *注意：多个类选择器，没有空格* / 
  

t .col-offset-8 自行工作？

这是我的CodePen 。

$ b

@media all和（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 +页边距* /}} / *用于演示* /。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为H. COL-12< / p为H. < / 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为H. COL-8< / p为H. < / DIV> < div class =col-4> < p为H. COL-4; / p为H. < / div>< / div>< div class =row> < div class =col-12> < p为H. COL-12< / p为H. < / div>< / div>  

解决方案

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

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

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

您可以从 .col-offset-8增加选择器的特殊性 到 .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偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！