twitter-bootstrap 遗留 CSS 与 Bootstrap 冲突 - 如何解决？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18092310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Legacy CSS conflicts with Bootstrap - how to resolve?
提问by Randy Greencorn
I'm new to Bootstrap, so this might be a naive question for you all. But I'm sure others have or will have a similar question so here goes.
我是 Bootstrap 的新手，所以这对你们来说可能是一个天真的问题。但我相信其他人已经或将会有类似的问题，所以这里是。
I'm implementing bootstrap to a site that has been around for quite a while and evolved over the years. As soon as I add the bootstrap css and js to my html, many elements get messed up. As far as I can tell, this is attributable to me using the same class names as bootstrap. For example, I have a class called 'btn' and so does bootstrap. All my buttons look ugly and/or odd shaped. The list goes on and on.
我正在对一个已经存在了很长一段时间并经过多年发展的站点实施引导程序。一旦我将 bootstrap css 和 js 添加到我的 html 中，许多元素就会变得一团糟。据我所知，这归因于我使用与 bootstrap 相同的类名。例如，我有一个名为“btn”的类，bootstrap 也是如此。我所有的按钮看起来都很丑陋和/或形状奇怪。这份清单不胜枚举。
Is this pretty much par for the course when people first implement Bootstrap on an existing site? Is it just a matter of going through the old css files and renaming things? Any elegant solutions out there?
当人们第一次在现有网站上实施 Bootstrap 时，这是否与课程相当？这只是浏览旧的 css 文件并重命名的问题吗？有什么优雅的解决方案吗？
回答by Randy Greencorn
Paul and Millimoose both provided the solution that worked for me. However, for newbies, the solution took a bit of digging, so here's a step by step description of what worked for me (and what I believe they were recommending).
Paul 和 Millimoose 都提供了对我有用的解决方案。然而，对于新手来说，解决方案需要一些挖掘，所以这里有一个对我有用的东西（以及我相信他们推荐的东西）的分步描述。
Basically, you have to modify the bootstrap css file. Basically wrap the entire bootstrap css file inside this:
.bootstrap{ //entire boostrap css file goes here }
Use http://winless.org/online-less-compilerto generate new css code. You'll need to past the code above into the left hand side of form in the above link.
Copy and past the output from the above link into a css file. Include this css file in your html.
When needing to use boostrap, simply place around the elements you want bootstrap to apply to.
基本上，您必须修改引导 css 文件。基本上将整个 bootstrap css 文件包装在这个里面：
.bootstrap{ // 整个 boostrap css 文件放在这里 }
使用http://winless.org/online-less-compiler生成新的 css 代码。您需要将上面的代码粘贴到上面链接中表单的左侧。
将上述链接的输出复制并粘贴到 css 文件中。将此 css 文件包含在您的 html 中。
当需要使用 boostrap 时，只需将要应用引导程序的元素放在周围即可。
Big thanks for all the help in figuring out this solution. Works well.
非常感谢您为找出此解决方案提供的所有帮助。效果很好。
回答by Paul T
I think the easiest way is to use a css pre-processor to namespace all of bootstraps css components.
我认为最简单的方法是使用 css 预处理器来命名所有引导程序 css 组件。
If you got to their github repo: https://github.com/twbs/bootstrap/you will see they have a LESS distrubution of the code. From there, you can namespace all of their styles by wrapping the library in some kind of class, such as millimoose mentioned.
如果您访问了他们的 github 存储库：https: //github.com/twbs/bootstrap/，您将看到他们对代码的分发较少。从那里，您可以通过将库包装在某种类中来命名所有样式，例如提到的millimoose。
From their you can add the bootstrap namespace to certain html elements, and the library will only effect that dom node and its children.
您可以从它们中将 bootstrap 命名空间添加到某些 html 元素，并且该库只会影响该 dom 节点及其子节点。
回答by Gino
I did a GIST with Bootstrap 3 all inside a class named .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
我在一个名为 .bootstrap-wrapper 的类中使用 Bootstrap 3 做了一个 GIST https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
I started with this tool: http://www.css-prefix.com/And fix the rest with search and replace in PHPstorm. All fonts @font-face are hosted on maxcdn.
我从这个工具开始：http: //www.css-prefix.com/并在 PHPstorm 中通过搜索和替换修复其余部分。所有字体@font-face 都托管在 maxcdn 上。
First line example
第一行示例
.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
回答by Mas Ghahremani
This issue occurs when an HTML document recognizes two parameter of one style within it.
当 HTML 文档识别出其中一种样式的两个参数时，就会出现此问题。
Remove or comment or modify parameters that caused project messed up.
bootstrap.cssfile or any referrence else, except your custom cssfile.
删除或注释或修改导致项目混乱的参数。
bootstrap.css文件或任何其他引用，除了您的自定义 css文件。
Notice: you aren't able to do this when you use bootstrap.min.cssformat of file.
use bootstrap.csswithout minto be editable.
注意：当您使用bootstrap.min.css文件格式时，您无法执行此操作。使用bootstrap.css但min不可编辑。
