在某个容器内禁用Bootstrap CSS，停止覆盖css [英] Disabling Bootstrap CSS inside a certain container, stop overriding css

问题描述

我目前正在使用bootstrap和knockoutjs来显示一个网页，其中包含一些数据的实时预览。例如，用户在左侧的文本框中输入标题。然后，页面的右侧会根据其他一些设置更新格式化该文本。所以它可能类似于< h1> {title}< / h1>或者它可能是< u> {title}< / u>。但是，此时用户请求的所有内容都是纯文本标题。

I am currently using bootstrap and knockoutjs to display a webpage that has a live preview of some data. For instance, a user enters a title, in a textbox, on the left hand side. Then, the right hand side of the page updates to format that text based on some other settings. So it might be something like <h1>{title}</h1> or it might be <u>{title}</u>. However, all that is requested from the user, at this point, is the title in plain text.

问题是，因为预览实际上是由HTML文档创建的用户。因此，一些bootstrap CSS会覆盖用户指定的CSS。所以上面的< h1>将继承bootstraps h1 CSS类，而不是使用用户HTML模板中的任何内容。这意味着在使用创建的文档时，预览可能与实际发生的情况不同。

The issue is, as the preview is actually a HTML document created by the users. So, some of the bootstrap CSS overrides the CSS specified by the users. So the above <h1> will inherit bootstraps h1 CSS class, rather than using whatever is in the users HTML template. This means at the time of using the created document, the preview may differ to what is actually happening.

JSFiddle示例： http://jsfiddle.net/Piercy/4fcmk/

JSFiddle example: http://jsfiddle.net/Piercy/4fcmk/

HTML：

<div class="content">
<h1>Header 1</h1>

    <div id="Preview">
        <!-- Start Html Template -->
        <style>
            .header
            {
                color: red;
            }
        </style>
        <h1 class="header">Header Class</h1>
        <!-- End Html Template -->
    </div>
</div>

CSS：

.content h1
{
    color: blue;
}

用户希望Header Class为红色，因为他们不知道关于内容css的任何事情。在我的代码中我使用bootstrap，但这显示了问题的简化版本。通常，你只是让CSS更具体，但由于用户不知道bootstrap（或者在jsFiddle示例内容中），我们真的不希望他们修改CSS。

The user would expect "Header Class" to be red as they do not know anything about the content css. In my code i am using bootstrap but this shows a simplified version of the issue. Normally, you would just make the CSS more specific but because the user doesn't know about bootstrap (or in the jsFiddle example content) we can't really expect them to modify the CSS.

我需要尝试找到一种方法来停止某个容器（在jsFiddle中预览div）使用它的父级使用的样式表，或者想象一下我可以修改bootstrap CSS以便覆盖问题更少很可能。

I need to try figure a way to either stop a certain container (preview div in the jsFiddle) using the stylesheet thats being used by it's parent or figure a way i can modify the bootstrap CSS so that overriding issues are less likely.

当然，坚持使用iframe可以实现这一目标但是我会在尝试访问和修改预览时遇到问题。

Of course, sticking it in an iframe would accomplish this but then I will have issues trying to access and modify the preview.

我对所有想法持开放态度，只想尝试找到最合适的方式来应对这种情况。我发现这很难放在纸上，所以我很难道歉，如果难以理解的话。

I am open to all ideas, just want to try find the most appropriate way to deal with this situation. I found this rather difficult to put down on paper so I apologise if it is hard to understand.

推荐答案

根据我的理解，那里有无法告诉CSS不继承样式。但是，这是一个有趣的解决方法。

To my understanding, there is no way to tell CSS to not inherit styles. However, here's an interesting idea for a workaround.

获取bootstrap.css文件并将其放入您选择的CSS预处理器中（我使用了LESS）。

Take the bootstrap.css file and drop it into your CSS preprocessor of choice (I used LESS).

接下来，使用ID或类引导程序包装所有样式，如下所示：

Next, wrap ALL of the styles with an ID or class of bootstrap like this:

#bootstrap { ...all the bootstrap styles go here. }

然后，将其保存为.less文件并进行编译。您的结果将是从#bootstrap或.bootstrap继承的所有引导样式（取决于您是否使用ID或类来包装引导程序的样式）。

Then, save it as a .less file and compile it. Your result will be all the bootstrap styles inheriting from #bootstrap or .bootstrap (depending whether you used an ID or class to wrap bootstrap's styles).

最后，包装任何标记在您的模板中，您的用户不会在div中进行编辑，并为此div指定#bootstrap或.bootstrap类的ID，并且仅包含我们刚刚使用LESS处理的引导程序文件。

Finally, wrap whatever markup in your template that your users will not be editing in a div and give this div an id of #bootstrap or class of .bootstrap, and include only the bootstrap file we just processed using LESS.

它负责用户的CSS不从bootstrap继承。但是，您的用户仍然可以编写引导程序将继承的样式。要解决这个问题，请将用户的内容包装在#user或.user之类的id或类中，并要求他们使用.user>开始他们的所有样式。喜欢这样：

That takes care of the user's CSS not inheriting from bootstrap. However, your users can still write styles that bootstrap will inherit. To get around this, wrap the user's content in an id or class of something like #user or .user and ask them to begin all of their styles with .user > likes this:

.user > h1 {color: red;}
.user > p {font-size: 18px;} 

这应该将HTML模板的样式与用户的样式分开 - 它只需要你的用户多做一些工作。

This should separate your HTML template's styles from your users' styles - it just takes a little bit more work from your users.

这是 jsfiddle 来证明：

这篇关于在某个容器内禁用Bootstrap CSS，停止覆盖css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！