Question

我正在尝试使用Bootstrap使现有网站响应。问题是现有css文件中的某些类名定义了与Bootstrap css文件中名称相同的类。

我很好奇，如果有办法定义样式表作为类样式的来源吗？

想象一下，原始CSS文件中定义了container类，并在Bootstrap CSS中定义了container类。有可能以某种方式区分它们吗？或者只有重命名才能解决问题？

Answer 1

在处理此问题之前，请仔细考虑。

您可以在声明中链接一个或另一个css，但显然它只能在此视图中使用链接的css。（如果您不需要两者，建议使用）
如果您链接两者（不推荐），每个的负载可能会与您期望的不同，造成视觉故障或失去可用性。
你可以处理加载时间，期望它按照预期加载（第一个链接在第二个之前）这是一个坏主意，因为它取决于许多事情按照它的预期工作，或使用javascript来制作一些样式表加载后（不推荐）。
使用！重要声明（强烈不推荐）

为什么不推荐它？

您将覆盖属性和值，使其不稳定并增加加载时间，特别是如果您使用javascript。
您将失去对浏览器应用于对象的属性的控制权，而不是。特别是因为Bootstrap将优先于某些属性，即使其他css加载后（由于精确的选择器）。
！重要的是，具有讽刺意味的是不如精确的选择器重要，所以它只能处理Bootstrap。另一方面，每次需要覆盖属性值时都会很困难（如果可能，尽量不要覆盖，但如果需要，建议使用更好的选择器或不同的类名或ID来获得干净的可维护代码）。 / p>

你可以做什么？

你有不同的选择。

第一个（最好的）将此自定义css拆分为不同的css样式表，具体取决于所需的视图，以避免在没有引用时加载样式。第二步是清理那些css文件，更改类名以不干扰引导程序，并删除引导程序已有的可能重复或覆盖的属性。你会有一个干净，快速和漂亮的CSS。
第二个是更改css上的类名并清除可能覆盖干扰引导程序的属性。
最快的一个，如果你讨厌网站所有者，只需更改自定义css上的类名，以及HTML和bootstrap类上对它们的引用：

＆LT; div class =“customContainer container”＆gt; ......

并开始祈祷覆盖不要在某些版本的浏览器上引起故障。

修改

你还有另一种选择，就是编辑bootstrap框架类名，这是不推荐的，因为你需要生成文档并且维护性较差（程序员/设计人员知道引导程序而不是修改过的引导程序），而你将不得不浪费大量时间做好。

Answer 2

只需添加一个自定义类，例如＆＃34; custom-container＆＃34;并为此类添加样式。

Answer 3

重命名类是现有css的选项。同名不是选项。

Answer 4

更改您的初始类名，因为需要默认的引导程序类来使您的站点响应，或者更好地编辑引导程序包

Answer 5

第1步：加载引导程序后加载自定义css文件。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

如果仍然无法正常工作，请将其添加为重要内容。但避免使用这个技巧，因为它可以覆盖基础样式。例如：

p {
    color: red !important;
}

第2步:(更好的一个）您可以使用ID进行样式设置。

#custom_id p{
  color: red;
}

<body id="custom_id">

Answer 6

我建议你使用ID，因为id是唯一的并且用于特定样式。它总是很好用，而不是稍后在类属性上使用!important。另一种选择是重命名类。

Answer 7

首先添加bootstrap css，然后添加你的css。类中的样式将覆盖引导类样式（引导程序中的某些样式变得很重要，以便您的样式中的类应该重要）。