css - 将一个类的CSS样式应用到另一个类中

Question

对于下面的 Bootstrap 代码，我必须将 col-sm-2 和 col-sm-10 硬编码到我所有的表单元素中。有没有一种方法可以避免这种硬编码并根据以下逻辑使用 x-col-sm-left 和 x-col-sm-right？

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>



<div class="form-group">
        <label for="inputEmail3" class="x-col-sm-left control-label">Email</label>
        <div class="x-col-sm-right">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="x-col-sm-left control-label">Password</label>
        <div class="x-col-sm-right">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>

x-col-sm-left {
 extend col-sm-2 (for example)
}
x-col-sm-right{
 extend col-sm-10 (for example)
}

让我稍后说我需要将 col-sm-2 更改为 col-sm-3，我应该能够按照下面的方式进行此更改，而无需编辑我的 html 代码

x-col-sm-left {
     extend col-sm-3 (for example)
    }
    x-col-sm-right{
     extend col-sm-9 (for example)
    }

Answer 1

我不确定我是否完全理解您的意思，但我认为这就是您的意思。

因此，添加一个只会在另一个类中应用的类，您将执行以下操作

.col-sm-2 .x-col-sm-left {
   /*Style you want here*/
}

所以现在 x-col-sm-left 可以在 col-sm-2 中使用，一旦你有 col-sm-2 的父级。这将覆盖

.col-sm-2{
  /*Syle*/
}

至于继承，你可以使用，定义多个具有相同属性的类。但是我在CSS中没有直接的inherits//extends意识到。

多重定义的例子:

.col-sm-2, .x-col-sm-left {
       /*Style you want here*/
    }