Question

我设法破坏了一个我正在管理的大型网站上的某些页面。某些页面在小型设备上有适当的页边距或填充，这是不应该的。

我觉得自己在某些行上有些混乱，因为我没有给行指定一个唯一的名称-所以我所做的更改在网站的所有页面上都是全局的。

如果我必须在一行中更改某些内容而不影响整个网站，则行的正确唯一表示法是什么？我从下面的代码示例中使用了nr 3。是吗？

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

<!-- 1 -->
<div class="row foo">
   <div class="col-sm-12">
</div>
<!-- 2 -->
<div class="row-foo">
   <div class="col-sm-12">
</div>
<!-- 3 -->
<div class="foo row">
   <div class="col-sm-12">
</div>

Answer 1

您可以为您的div分配一个ID，然后在您的CSS中引用它。请记住，该ID必须是唯一的。

.row {
  height: 100px;
  width: 100px;
  background-color: red;
}

#row2 {
  background-color: blue;
}

<div class="row"></div>
<div class="row" id="row2"></div>
<div class="row"></div>

Answer 2

.foo .row是嵌套类

<div class="foo">
   <div class="row col-sm-12">
       the style will apply
   </div>
</div>
<div class="row col-sm-12">
   the style wont apply
</div>

你要问的是

<style>
.foo-row {
  margin-left: 15px!important;
  margin-right: 15px!important;
}
</style>

<div class="row foo-row">
    uses the row style and overrides the foo-row style
</div>

在一行上设置样式，而不更改网站上的所有行

2 个答案: