將一個類的css風格應用到另一個類

Question

對於以下引導代碼，我必須將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，我應該能夠做到這一點的變化如下wihtout編輯我的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-留在山坳-SM-2可以使用，一旦你有一個COL-SM-2的家長。這將覆蓋

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

爲繼承，你可以使用,做定義具有相同屬性的多個類的..但是在CSS沒有直接inherits // extends據我所知的。多個定義的

實施例：

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