Question

首先请原谅我的语言，这是我的第三语言，我是新手。

我想用html，css和bootstrap创建一个不需要响应的小网站。所以我用javascript和CSS做了一个粘性Navbar，看起来不错。因为我想使用ajax（不必在每个html文件上都写导航栏）和Bootstrap（用于某些按钮，模态等）。

所以我在html-doc中添加了Bootstrap，现在整个导航栏的样式都不同。它甚至不再发粘，底部有一个奇怪的白色边框。

如果您能帮助我，那将很好。

我正在使用Brackets，所以所有这些都是本地的，我不打算使用它来创建一个真实的网站。

祝大家圣诞快乐！
巴斯蒂

Answer 1

为什么？

您的css声明已被bootstrap声明覆盖：

例如，我尝试设置color:red，但看看发生了什么：

您必须使用以下步骤来最小化CSS和引导CSS之间的冲突：

在引导程序链接下方设置css链接

<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="yourCss.css" rel="stylesheet">
在CSS中将Specificity用作自己的id或class

特异性是浏览器决定哪个CSS属性的方式值与元素最相关，因此将是应用。特异性基于组成的匹配规则不同种类的CSS选择器。
如果您的CSS声明已被覆盖，请使用!important

例如color:red!important

Answer 2

Bootstrap是预定义类随附的前端框架，这是您更改网站样式以解决此问题的主要原因，您可以添加自定义CSS，例如，引导程序中的预定义类之一如下

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

请注意，“ alert alert-primary”类（使用了2个类，第一个是alert，第二个是alert-primary），这负责预定义的样式。因此，要解决您的问题，您可以类似地添加另一个类，并根据需要在CSS文件中定义其自定义样式。因此，在上面的示例中添加另一个类将像这样

<div class="alert alert-primary anotherClass" role="alert">
  A simple primary alert—check it out!
</div>

然后通过像这样在CSS中定位相同的类来设置样式

.anotherClass {
  /*your styles go here*/
}

别忘了链接CSS文件。