问
在某个容器内禁用Bootstrap CSS,停止覆盖css
爱唱歌的郭少文_ 发布于 2023-02-06 04:26我目前正在使用bootstrap和knockoutjs来显示一个网页,其中包含一些数据的实时预览.例如,用户在左侧的文本框中输入标题.然后,页面的右侧会根据其他一些设置更新格式化该文本.所以它可能类似于
{title} ,也可能是 {title} .但是,此时用户请求的所有内容都是纯文本标题.
问题是,预览实际上是用户创建的HTML文档.因此,一些bootstrap CSS会覆盖用户指定的CSS.所以上面的
将继承bootstraps h1 CSS类,而不是使用用户HTML模板中的任何内容.这意味着在使用创建的文档时,预览可能与实际发生的内容不同.
JSFiddle示例:http://jsfiddle.net/Piercy/4fcmk/
HTML:
CSS:
.content h1
{
color: blue;
}
用户希望"Header Class"为红色,因为他们对内容css一无所知.在我的代码中我使用bootstrap,但这显示了问题的简化版本.通常,您只是使CSS更具体,但由于用户不知道bootstrap(或在jsFiddle示例内容中),我们真的不希望他们修改CSS.
我需要尝试一种方法来停止某个容器(jsFiddle中的预览div)使用它的父级使用的样式表,或者我可以修改引导CSS的方式,这样就不太可能出现覆盖问题.
当然,将其粘贴在iframe中可以实现此目的,但是在尝试访问和修改预览时我会遇到问题.
我对所有想法持开放态度,只想尝试找到最合适的方式来应对这种情况.我发现这很难放在纸上,所以如果难以理解我会道歉.
1 个回答
-
据我了解,没有办法告诉CSS不继承样式.但是,这是一个有趣的解决方法.
获取bootstrap.css文件并将其放入您选择的CSS预处理器中(我使用了LESS).
接下来,使用ID或类引导程序包装所有样式,如下所示:
#bootstrap { ...all the bootstrap styles go here. }然后,将其保存为.less文件并进行编译.您的结果将是从#bootstrap或.bootstrap继承的所有引导样式(取决于您是使用ID还是类来包装引导程序的样式).
最后,在模板中包含用户不会在div中编辑的任何标记,并为此div指定#bootstrap或.bootstrap类的id,并仅包含我们刚刚使用LESS处理的引导程序文件.
这会照顾用户的CSS不从bootstrap继承.但是,您的用户仍然可以编写引导程序将继承的样式.要解决这个问题,请将用户的内容包装在像#user或.user这样的id或类中,并要求他们使用.user>开始他们的所有样式.喜欢这样:
.user > h1 {color: red;} .user > p {font-size: 18px;}这应该将您的HTML模板的样式与用户的样式分开 - 它只需要您的用户多做一些工作.
这是一个jsfiddle来演示:
2023-02-06 04:58 回答
_i逗比_985
撰写答案
今天，你开发时遇到什么问题呢？
立即提问
京公网安备 11010802041100号