旧版 CSS 与 Bootstrap 冲突 - 如何解决？答案

【问题标题】：Legacy CSS conflicts with Bootstrap - how to resolve?旧版 CSS 与 Bootstrap 冲突 - 如何解决？
【发布时间】：2013-08-06 23:39:16
【问题描述】：

我是 Bootstrap 的新手，所以这对大家来说可能是一个幼稚的问题。但我相信其他人也有或将会有类似的问题，所以就这样吧。

我正在为一个已经存在了很长一段时间并经过多年发展的网站实施引导程序。一旦我将引导 css 和 js 添加到我的 html 中，许多元素就会变得混乱。据我所知，这归因于我使用与引导程序相同的类名。例如，我有一个名为“btn”的类，bootstrap 也是如此。我所有的按钮看起来都很丑和/或形状很奇怪。名单还在继续。

当人们第一次在现有网站上实施 Bootstrap 时，这是否与课程相当？是否只是浏览旧的 css 文件并重命名的问题？有什么优雅的解决方案吗？

【问题讨论】：

您可以将 Bootstrap 的样式命名为特定容器的子级：stackoverflow.com/questions/13966259/…。这将要求您有效地维护自己的“自定义”引导版本，但自定义非常简单。
您可以下载自定义版本的引导程序，它只包含您想要的组件。 getbootstrap.com/2.3.2/customize.html

标签： twitter-bootstrap

【解决方案1】：

Paul 和 Millimoose 都提供了适合我的解决方案。但是，对于新手来说，解决方案需要一些挖掘，所以这里逐步描述对我有用的方法（以及我相信他们推荐的方法）。

基本上，您必须修改引导 css 文件。基本上将整个引导 css 文件包装在这个里面：

.bootstrap{ //整个boostrap css文件放在这里 }
使用http://winless.org/online-less-compiler 生成新的css 代码。您需要将上面的代码粘贴到上面链接中表单的左侧。
将上述链接的输出复制并粘贴到 css 文件中。在你的 html 中包含这个 css 文件。
当需要使用 boostrap 时，只需将要应用 bootstrap 的元素放在周围即可。

非常感谢您为找出此解决方案提供的所有帮助。效果很好。

【讨论】：

在弄清楚如何使用 Less 执行此操作时遇到了很多麻烦。非常感谢你。你知道这是否会影响引导 js 文件的工作方式吗？它是否依赖于类名？
非常感谢。这对我有帮助。
您如何执行步骤 (4) -> 只需围绕元素进行操作？我不明白这个。
@zaitsman，我认为他的意思是：
您好，winless 网站无法处理该内容。

【解决方案2】：

我认为最简单的方法是使用 css 预处理器来命名所有引导 css 组件。

如果您访问他们的 github 存储库：https://github.com/twbs/bootstrap/，您会发现他们的代码分布较少。从那里，您可以通过将库包装在某种类中来命名它们的所有样式，例如提到的 millimoose。

您可以通过它们将引导命名空间添加到某些 html 元素，并且该库只会影响该 dom 节点及其子节点。

【讨论】：

如何将引导命名空间添加到某些 html 元素？
我很想在这里看到答案。

【解决方案3】：

我在一个名为 .bootstrap-wrapper 的类中使用 Bootstrap 3 做了一个 GIST https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

我从这个工具开始：http://www.css-prefix.com/ 并通过 PHPstorm 中的搜索和替换来修复其余部分。所有字体@font-face 都托管在 maxcdn 上。

第一行示例

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

【讨论】：

【解决方案4】：

当 HTML 文档识别其中一种样式的两个参数时会出现此问题。

删除或评论或修改导致项目混乱的参数。 bootstrap.css 文件或任何其他参考，除了您的 自定义 css 文件。

注意：当您使用bootstrap.min.css 文件格式时，您无法执行此操作。使用 bootstrap.css 而不使用 min 可编辑。

【讨论】：

【解决方案5】：

其中一种解决方案是复制 Bootstrap.css 文件并将其包装在任何包装器中

.wrapper{
//bootstrap code
}

并将文件保存为 scss，例如 styles.scss

然后打开命令提示符或终端并输入以下命令

npx sass styles.scss destination.css

这将创建一个包含 wrapper 作为顶级样式的目标 CSS 文件，因此要使用这些样式，您必须使用

<div class="wrapper">
//your elements that will use bootstrap
</div>

【讨论】：