Question

我第一次使用Bootstrap时遇到了一些问题。由于某种原因，无论我对自定义CSS进行什么更改，它都不会影响引导CSS或布局的常规html。我目前正在尝试在Visual Studio中建立我的第一个网站，并被建议使用Bootstrap，但是我似乎无法使其按照我想要的方式工作。我已经成功创建了不需要使用引导程序的Web元素，但是当我尝试使用引导程序时，无论执行什么操作，它都不想显示任何自定义CSS。

如上所述，我尝试的第一件事是直接编辑bootstrap css，这绝对不会影响我的网页的布局。此后，我发现创建一个单独的main.css文件，然后将其链接到引导文件是个好主意，对main.css文件所做的任何更改都应更改引导css，而不必弄乱引导文件。但是，使用此方法，所有更改都不会改变网页的显示方式。之后，我决定逐步按照本教程https://websitesetup.org/bootstrap-tutorial-for-beginners/进行操作，即使该教程是notepad ++教程而不是Visual Studio教程。即使按照本教程的逐步操作，对CSS所做的任何更改都不会显示在网页上。

当我只是将我想要的html添加到布局页面而没有将bootstrap或main.css链接到布局页面时，功能可以按预期工作，但是我无法自定义html的某些内容，因此我需要使其与css一起使用

我已经做了一些Google搜索来解决此问题，并尝试了几种方法，例如将代码从布局页面的正文移到页脚，确保.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 */
        }

我正在尝试更改导航栏的颜色，文本的颜色，滚动时的文本的颜色，当前正在查看的页面的导航栏上的文本的颜色，文本类型/大小/位置，我希望将导航栏固定在页面顶部，以便在向下滚动页面时仍可以在窗口顶部看到导航栏。我希望导航栏与移动用户的窗口大小成比例，该功能包含在引导程序中。我知道我提到的所有内容都没有出现在上述CSS中，这是因为我想在开始输入所需的所有CSS之前先对其进行测试。

我已经可以在不使用引导程序的情况下完成所有这些操作，但是对于该项目，我必须使用它，而且无论我在CSS中进行了什么更改，我似乎都无法显示默认引导程序导航栏以外的任何内容。 / p>

Answer 1

首先将您的style 链接移至视口之后，还将您的自定义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>

我的CSS更改完全不会影响我的网页

1 个答案: