限制引导程序样式的范围 [英] Limit the scope of bootstrap styles

问题描述

如何将 Bootstrap 限制在 div 的范围内?我需要将 Bootstrap 样式表嵌套在特定 div 的 ExtJS 应用程序中，并且两者都发生冲突，因为它们需要自己的正文、ul、li、a 等.

How do I limit Bootstrap to just the scope of a div? I need to nest the Bootstrap stylesheet inside an ExtJS app for especific divs and both are clashing since they need their own body, ul, li, a, etc.

我试图避免手动编辑 bootstrap.css(或将其保持在最低限度)，以便它可以轻松更新.

I'm trying to avoid editing bootstrap.css manually (or keeping it to a minimum) so that it can be easily updated.

推荐答案

你可以fork the bootstrap repo并更改 bootstrap.less 以包装引导程序样式:

You can fork the bootstrap repo and change bootstrap.less to wrap the bootstrap styles:

.bootstrap-scope {
    //put bootstrap @includes in here
}

然后，在 bootstrap 项目的根目录下，运行 make 以生成 bootstrap.css 文件.

Then, in the root of the bootstrap project, run make to generate the bootstrap.css file.

您将丢失引导程序分配给 body 和 html 标签的全局样式，但无论如何您可能不想要它们.

You'll lose the global styles bootstrap assigns to the body and html tags, but you might not want them anyway.

然后，在您的应用中，为您想要的容器提供 .bootstrap-scope 类.

And then, in your app, give the container you want the .bootstrap-scope class.

这篇关于限制引导程序样式的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！