由于bootstrap3,很多我的html將會這樣結束：

Name on card

Card Number

參見上面的代碼,標簽節點有不同媒體屏幕的多個類.我想簡單地用自己的課來縮短他們的課程.

我試圖減少創建一個從多個類延伸的類

my-control-label:extend(.control-label, .col-xs-4, col-sm-6){}

但是,這不行,因為較少的使用完全匹配上面的例子.是的,我可以嘗試擴展“所有”,如下所示：

my-control-label:extend(.control-label all, .col-xs-4 all, col-sm-6 all){}

但這是令人討厭的,它會吹動生成的css.

那么有什么容易的方式來避免這樣的重復？

謝謝,

羅恩

更新#1：

甚至延伸一切都不適用于我的情況

HTML

...

減：

#finalise {

.my-label:extend(.control-label all, .col-xs-4 all, .col-sm-3 all, .col-lg-2 all){}

.my-controls:extend(.control-label all, .col-xs-8 all, .col-sm-5 all, .col-lg-4 all){}

}

生成css：

@media (min-width: 768px) {

.form-horizontal .control-label,

.form-horizontal #finalise .label,

.form-horizontal #finalise .controls {

text-align: right;

}

}

看到第三行將不會應用html節點,這就是為什么它不起作用.

有什么建議么？

更新#2：

雖然它不是將幾個類組合成一個自定義類的通用方法,但它解決了這個問題.它使用引導網格混合解決了這個問題.感謝NiloVelez

HTML

...

減：

#finalise {

.form-group {

.make-row();

}

.control-label {

.make-xs-column(4);

.make-sm-column(5);

.make-lg-column(6);

}

.controls {

.make-xs-column(8);

.make-sm-column(5);

.make-lg-column(6);

}

}

總結

以上是生活随笔為你收集整理的html应用多个类,html – 如何避免重复多个css类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。