Question

我正在创建一个bootstrap布局，并且需要折叠除col-xs- *列之外的所有col- *列的填充/边距。我尝试了以下选择器无济于事。

.grid [class^="col-"]:not([class^="col-xs-"]) {
    padding: 0;
    margin: 0;
}

也许我在混淆某些东西或者这只是不支持？我知道我可以使用以下内容，但想知道为什么上述解决方案不起作用。

.grid [class^="col-sm-"], .grid [class^="col-md-"], .grid [class^="col-lg-"] {
    padding: 0;
    margin: 0; 
}

Answer 1

类col-xs- *用于col-sm-，col-md-元素，因此元素匹配两者。如果你在同一个元素上只有col-sm- *而不是col-xs- *，它就可以正常工作。

@media (min-width:768px) {

  .row.grid {margin-left:0;margin-right:0;}
  .grid [class*="col-"] {padding:0;}

}