<分区>
我正在调整一个网站以使用 Bootstrap。我想知道是否有任何使用它的方法,这样我的 HTML 元素就不会被类弄得乱七八糟。
我想替换下面的代码:
<div class="row">
<div class="hidden-xs col-sm-12 col-md-4 col-md-offset-1">
Text
</div>
</div>
用类似的东西:
<div class="row">
<div class="myClass">
Text
</div>
</div>
myClass
将继承 hidden-xs
、col-sm-12
、col-md-4
和 col-md-offset-1
类。
我一直在网上四处寻找,看看是否有任何方法可以让我自己的自定义类“继承” Bootstrap 类,这样我就可以尽可能地在 CSS 中保留样式,但我找不到任何东西.如果无法做到,我不会感到惊讶,但是有没有人对如何使最终结果看起来尽可能干净有任何建议或任何事情?
谢谢
最佳答案
直接在 CSS 中这是不可能的(据我所知),但如果你切换到 sass (scss) 应该是可能的。
话虽如此,我建议不要这样做,只需重复类(class)并完成它,这样每个人都能第一眼就知道该 block 是什么样子。
安装时 SASS ,你需要从他们的download page下载bootstrap的源文件并将 scss
目录提取到某个目录,例如 Bootstrap
。
在创建您自己的样式表之后,我们将其命名为 style.scss
(注意 scss
扩展名)。
现在在你的 style.scss
中:
@import "bootstrap/bootstrap";
@import "bootstrap/bootstrap-grid";
.myClass {
@extend .col-sm-12;
@extend .col-md-4;
// extend any other classes here
}
然后你编译你的 scss 文件(阅读 sass
documentation )并且你的 myClass
将拥有它扩展的类的所有属性。
如果您之前从未听说过 sass,请先阅读文档以了解其工作原理。
关于css - 有什么方法可以在布局中继承 Bootstrap 类吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55453858/