Question

我正在使用bootstrap，并试图在各种元素上获得正确的类，以便在各种设备上进行适当的布局。对许多人来说，我想要像control-label col-md-2这样的东西。所以我可以通过几十个元素，并将它们全部更改，但接下来 - 如果我意识到我真的想要col-md-9怎么办？然后我必须通过每个元素并更改类！所以我想要做的是：

<label class="label-class"/>

与

.label-class {
   control-label col-md-9
}

这可能吗？我在网上发现的关于组合课程的每个答案都涉及不同类型的问题。或者，如果我认为这一切都错了，我愿意学习更好的方法来测试各种布局：）

修改在进行了一些搜索后，我发现Can a CSS class inherit one or more other classes? - 似乎答案是“没有额外的实用程序＆＃39;遗憾的是

Answer 1

你可以实现它，但不能用CSS。您可以使用LESS文件，并使用适当的介质从LESS解析为CSS文件（＆＃34;随便＆＃34; Bootstrap核心用LESS编写，; D）。您正在寻找的规范是：http://lesscss.org/features/#mixins-parametric-feature

Bootstrap允许您下载其代码的LESS文件进行修改，然后，您可以使用JS编译器，如lesscss.org/usage/#using-less-in-the-browser

如果你正在使用PHP，那么在将它发送到浏览器之前有一些库可以编译它，最新的是使用Bootstrap 3.0，我使用的是：http://leafo.net/lessphp/ < / p>

希望这有帮助，XD

Answer 2

@Chococroc是对的。这是一个简单的步骤：

Step1 ：添加less.js

<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="script/less-1.3.3.min.js"></script>

请记住，js会在页面中包含less之后调用。

Step2 ：写出style.less

.label-class {
    .control-label;
    .col-md-9;
}

有关规则较少的更多信息，请访问：http://lesscss.org/

Answer 3

如果您不想使用.less和编译器，则可以使用jQuery在就绪时添加类：

$(document).ready(function() {
  $('.label-class').addClass('control-label col-md-9');
})

您可以在易于编辑的函数中创建一整套集合，这些函数将引导程序类（btn-1和btn-2）添加自定义类（btn-3）甚至内联CSS（{ {1}}-但是不要过度使用它-很快就会变得混乱。

btn-4

如何将2个CSS类合并为一个？

3 个答案: