由于bootstrap3,很多我的html將會(huì)這樣結(jié)束：

Name on card

Card Number

參見上面的代碼,標(biāo)簽節(jié)點(diǎn)有不同媒體屏幕的多個(gè)類.我想簡(jiǎn)單地用自己的課來縮短他們的課程.

我試圖減少創(chuàng)建一個(gè)從多個(gè)類延伸的類

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

但是,這不行,因?yàn)檩^少的使用完全匹配上面的例子.是的,我可以嘗試擴(kuò)展“所有”,如下所示：

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

但這是令人討厭的,它會(huì)吹動(dòng)生成的css.

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

謝謝,

羅恩

更新#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;

}

}

看到第三行將不會(huì)應(yīng)用html節(jié)點(diǎn),這就是為什么它不起作用.

有什么建議么？

更新#2：

雖然它不是將幾個(gè)類組合成一個(gè)自定義類的通用方法,但它解決了這個(gè)問題.它使用引導(dǎo)網(wǎng)格混合解決了這個(gè)問題.感謝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);

}

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。