Bootstrapc3：覆盖左右边距

Question

尝试覆盖行类的默认左右边距

.row .row {
 margin-right: -15px;
 margin-left: -15px;
}

页面有多个rows，就像是 的 HTML

<div class="row row-padded" id="question1"></div>
<div class="row row-padded" id="question2"></div>
<div class="row row-padded" id="question3"></div>

CSS

.row-padded {
  margin-top:15px;
  padding-left:25px;
  padding-top:10px;
  padding-bottom:10px;
}

如果我用id覆盖它，它可以正常工作。这适用于一行

#question1 {
 margin-left:0px;
 margin-right:0px;
}

但这不是

div[id^='question'] {
    margin-left:0px;
    margin-right:0px;
}

Answer 1

您需要了解特异性的工作原理。 div[id^='question']不覆盖.row .row的原因是因为它只有一个元素和一个属性选择器（被认为与类具有相同的特异性），而后者有两个类选择器 - 类覆盖常规特殊性的元素，因此合并两个类比一个类和一个元素具有更高的优先级是有道理的。还要记住，ID会覆盖类和元素选择器。

如果您希望第二个选择器工作，请尝试：

div.row[id^='question'] {
 margin-left: 0px;
 margin-right: 0px;
}

Answer 2

<style>
.row{
 margin-left: 0px;
 margin-right: 0px;
}
</style>

在页面中提供这些代码，以便覆盖默认属性。

Answer 3

尝试将边距属性标记为重要：

div[id^='question'] {
    margin-left:0px !important;
    margin-right:0px !important;
}