Question

我正在改编网站以使用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类的地方。

我一直在网上四处看看，是否有办法使自己的自定义类“继承”引导类，以便我可以尽可能地保持CSS样式，但找不到任何东西。如果不可能做的话，我不会感到惊讶，但是有没有人对如何使最终结果看起来尽可能干净有任何建议或任何建议？

谢谢

Answer 1

直接在CSS中是不可能的（据我所知），但是如果您切换到sass（scss），则应该可以。

话虽如此，我建议不要这样做，只需重复上课并完成操作即可，这样每个人都可以乍一看就知道该块的外观。

在安装SASS时，需要从Bootstrap的download page下载源文件，并将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，请先阅读文档以了解其工作原理。

有什么方法可以在布局中继承Bootstrap类吗？

1 个答案: