遗留 CSS 与 Bootstrap 冲突 - 如何解决? [英] Legacy CSS conflicts with Bootstrap - how to resolve?

问题描述

我是 Bootstrap 的新手，所以这对你们所有人来说可能是一个天真的问题.但我相信其他人已经或将会有类似的问题，所以这里是.

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 css 和 js 添加到我的 html 中，许多元素就会变得一团糟.据我所知，这归因于我使用与 bootstrap 相同的类名.例如，我有一个名为btn"的类，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 文件并重命名的问题吗?有什么优雅的解决方案吗?

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?

推荐答案

Paul 和 Millimoose 都提供了对我有用的解决方案.然而，对于新手来说，解决方案需要一些挖掘，所以这里一步一步地描述了对我有用的东西(以及我相信他们推荐的东西).

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).

1. 基本上，你必须修改 bootstrap css 文件.基本上将整个 bootstrap css 文件包装在这个里面:

1. Basically, you have to modify the bootstrap css file. Basically wrap the entire bootstrap css file inside this:

.bootstrap{//整个boostrap css文件放在这里}

.bootstrap{ //entire boostrap css file goes here }

使用 http://winless.org/online-less-compiler 生成新的 css 代码.您需要将上面的代码粘贴到上面链接中表单的左侧.

Use http://winless.org/online-less-compiler to generate new css code. You'll need to past the code above into the left hand side of form in the above link.

将上述链接的输出复制并粘贴到一个 css 文件中.将此 css 文件包含在您的 html 中.

Copy and past the output from the above link into a css file. Include this css file in your html.

当需要使用 boostrap 时，只需将要应用引导程序的元素放在周围即可.

When needing to use boostrap, simply place around the elements you want bootstrap to apply to.

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

Big thanks for all the help in figuring out this solution. Works well.

这篇关于遗留 CSS 与 Bootstrap 冲突 - 如何解决?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！