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

标签 css twitter-bootstrap class

<分区>


想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它.

关闭 4 年前

我正在调整一个网站以使用 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-xscol-sm-12col-md-4col-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/

上一篇:javascript - 带百分比的虚线圆条

下一篇:css - *[data-some-id ='XX' ] 和 [data-some-id ='XX' ] 在性能方面有区别吗?

相关文章:

Html ,CSS 固定宽度高亮悬停背景

html - Bootstrap 4 支持 IE 10

css - 可以在不重复像素棒的情况下将背景颜色从颜色 A 过渡到颜色 B 吗?

css - 如何将伪元素前后定位到其父元素的中右和中左?

html - Safari 中具有缩放和变换原点的 SVG animateTransform

javascript - 如何在多个页面中显示从数据库中获取的行?

javascript - 是否可以从远程文件更改 BootstrapDialog 标题和其他属性?

c# - 创建不能接收空参数的方法或列表

r - 编写用户函数以返回每个变量的列位置、列名、模式和类

c++ - c++定义前通过调用类初始化对应的类