Question

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

我正在为一个已经存在了很长一段时间并且多年来不断发展的网站实施bootstrap。一旦我将bootstrap css和js添加到我的html中，很多元素就搞砸了。据我所知，这可归因于我使用相同的类名作为bootstrap。例如，我有一个名为'btn'的类，bootstrap也是如此。我的所有按钮看起来都很丑陋和/或奇怪。这个清单一直在继续。

当人们第一次在现有网站上实施Bootstrap时，这是否与课程相当？这只是通过旧的CSS文件和重命名的事情？有优雅的解决方案吗？

Answer 1

Paul和Millimoose都提供了适合我的解决方案。然而，对于新手来说，解决方案需要一些挖掘，所以这里有一步一步描述对我有用的东西（以及我认为他们推荐的东西）。

基本上，您必须修改bootstrap css文件。基本上将整个bootstrap css文件包装在其中：

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

非常感谢您找到解决方案的所有帮助。效果很好。

Answer 2

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

如果你得到他们的github回购：https://github.com/twbs/bootstrap/，你会看到他们对代码的分配很少。从那里，你可以通过将库包装在某种类中来命名它们的所有样式，例如millimoose提到的。

从他们可以将bootstrap命名空间添加到某些html元素，并且该库只会影响该dom节点及其子节点。

Answer 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%}

Answer 4

当HTML文档识别出其中一个样式的两个参数时，就会发生此问题。

删除或注释或修改导致项目混乱的参数。 bootstrap.css文件或其他任何引荐来源，但您的自定义除外 css 文件。

通知：使用bootstrap.min.css格式的文件时，您将无法执行此操作。使用bootstrap.css而不使用min进行编辑。

Answer 5

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

.wrapper{
//bootstrap code
}

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

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

npx sass styles.scss destination.css

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

包装您的代码

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

传统CSS与Bootstrap冲突 - 如何解决？

5 个答案: