我第一次使用 Bootstrap 时遇到了一些问题。出于某种原因，无论我对自定义 css 进行何种更改，它都不会影响 bootstrap css 或布局的常规 html。我目前正在尝试在 visual studio 中建立我的第一个网站，并被建议使用 Bootstrap ，但我似乎无法让它按照我想要的方式工作。我已经在不使用 bootstrap 的情况下成功创建了我想要的 Web 元素，但是当我尝试使用 bootstrap 时，无论我做什么，它都不想显示我的任何自定义 css。
正如我上面所说，我尝试的第一件事是直接编辑 bootstrap css，这对我的网页布局完全没有影响。在此之后，我发现创建一个单独的 main.css 文件然后将其链接到 bootstrap 文件是个好主意，对 main.css 文件所做的任何更改都应该更改 bootstrap css 而不必弄乱 bootstrap文件。但是，使用这种方法，任何更改都不会以任何方式改变网页的显示方式。在此之后，我决定遵循本教程 https://websitesetup.org/bootstrap-tutorial-for-beginners/一步一步，即使它是 Notepad++ 教程而不是Visual Studio教程。即使按照本教程一步步进行，对 css 所做的任何更改也不会显示在网页上。
当我简单地将我想要的 html 添加到布局页面而不将 bootstrap 或 main.css 链接到布局页面时，这些功能按预期工作，但我无法使用 html 自定义一些东西，所以我需要让它与 css 一起工作.
我在谷歌上搜索了几次这个问题的解决方案并尝试了几种，例如将代码从布局页面的主体移动到页脚，确保 .css 文件的文件目录正确，包括大写字母，但我似乎找不到问题出在哪里。
这就是我将布局页面链接到 main.css 文件的方式，该文件包含用于更改网页导航栏的 css:
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
this is the link to the Main.css file with my custom .css that I used in the layout view in visual studio
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
This is the link to the bootstrap file I used when following the above tutorial and added this to the head of the index.html file
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
这是我放入 main.css 文件的内容，同时还在 bootstrap.css 中找到 .nav 类，并尝试将此信息也放入 Bootstrap 文件中。
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
我正在尝试更改导航栏的颜色、文本的颜色、滚动时文本的颜色、当前正在查看的页面的导航栏上的文本颜色、文本类型/大小/位置，我希望导航栏固定在页面顶部，这样当您向下滚动页面时，您仍然可以在窗口顶部看到导航栏。我希望导航栏随移动用户的窗口大小缩放，这是 bootstrap 中包含的一项功能。我知道我提到的所有内容都没有出现在上面的 css 中，这是因为我想在开始输入我需要的所有 css 之前测试它的功能。
我已经可以在不使用 bootstrap 的情况下完成所有这些操作，但是对于这个元素，我需要使用它，而且无论我在 css 中进行什么更改，我似乎都无法显示除默认 bootstrap 导航栏之外的任何内容。
最佳答案
首先将您的style Link 移动到Viewport 之后，同时移动您的自定义CSS 文件Main.css在 Bootstrap.min.css 之后。试试这个，我希望它能解决您的问题。谢谢
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StyleSheet -->
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
关于html - 我的 CSS 更改根本不会以任何方式影响我的网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56378634/