Question

我有几种设计需要使用相同的html。（尽管我可以更改CSS文件。）如何在CSS文件中按ID对元素使用显示实用工具类？

这里是一个代码笔示例。 https://codepen.io/warrenkc/pen/QPVpVR

#wide {
    /* twitter-bootstrap display utility class */ 
    .d-lg-none
}
#small{
    /* twitter-bootstrap display utility class */ 
    .d-none d-lg-block
}

Answer 1

不幸的是，您不能使用普通CSS来做到这一点。就像注释中提到的那样，您可以使用Sass / Scss / Less之类的预处理器来完成此操作。

如果必须实现此目标，我将要做的就是找到您要使用的类具有的代码（通过开发人员工具轻松执行>使用所需类检查元素），然后将其复制粘贴到您想要的位置要使用它。

这不是最干净的解决方案，而是您要解决的方法。

Answer 2

谢谢！你们帮了很多忙。你真棒。

我最终在CSS中做了什么：

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

    #wide {
        display: none;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #wide {
        display: block;
    }
}

如何使用CSS文件中的引导显示实用程序类按ID标识元素？

2 个答案: