【问题标题】：Why does Bootstrap destroys my normal css layout and how do I fix it?为什么 Bootstrap 会破坏我的正常 CSS 布局，我该如何解决？
【发布时间】：2023-04-04 09:30:02
【问题描述】：
首先请原谅我的语言，这是我的第三语言，我是新手。
我想做一个不需要响应式的带有 html、css 和 bootstrap 的小网站。
所以我做了一个带有 javascript 和 css 的粘性导航栏，看起来不错。因为我想使用 ajax（不必在每个 html 文件上编写导航栏）和 Bootstrap（对于某些按钮、模式等）
所以我在我的 html-doc 中添加了 Bootstrap，现在我的整个导航栏的风格不同了。它甚至不再粘，底部有一个奇怪的白色边框。
如果你能帮助我，那就太好了。
我正在使用 Brackets，所以所有这些东西都是本地的，我不打算用它制作一个真正的网站。
祝大家圣诞快乐！
巴斯蒂
【问题讨论】：
标签：
javascript
html
css
twitter-bootstrap
bootstrap-4
【解决方案1】：
为什么？
您的 css 声明已被引导程序声明覆盖：
例如，我尝试设置color:red，但看看发生了什么：
你必须使用这个步骤来最小化你的 css 和 bootstrap 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
【解决方案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 文件。