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

For the below bootstrap code, I have to hard code col-sm-2 and col-sm-10 to all my form elements. Is there a way where i can avoid this hardcode and use x-col-sm-left and x-col-sm-right based on below logic?

对于下面的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)
}

Lets say later I need to change col-sm-2 to col-sm-3, I should be able to do this change as below wihtout editing my html code

让我们说稍后我需要将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)
    }

1 个解决方案

#1

Im not sure i understand you completely but i think this is what you mean.

我不确定我完全理解你,但我认为这就是你的意思。

So add a class which will only be applied within another class you would do the folowing

因此,添加一个类,该类仅应用于您将要执行的另一个类中

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

so now x-col-sm-left can be used in col-sm-2 once you have a parent of col-sm-2.. this will overwrite

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

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

as for inheritance, you can use the , do define multiple classes with the same attributes.. But there is no direct inherits // extends in CSS that i am aware of.

至于继承,你可以使用,使用相同的属性来定义多个类。但是我没有直接的继承//在我所知道的CSS中扩展。

Example of multiple definition :

多重定义示例:

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

#1