首次使用Bootstrap时自定义CSS无法生效的技术求助

Hey there, let's work through this super common Bootstrap beginner issue—your custom CSS isn't taking effect because of a couple of key setup mistakes, plus some easy fixes to get your navbar looking exactly how you want.

1. Fix Your CSS Import Order (Critical!) #

Right now, you're loading your Main.css before Bootstrap's stylesheet. Browsers apply CSS rules in the order they're loaded, so any styles in Bootstrap will overwrite your custom ones if they have the same specificity. Swap the order so Bootstrap loads first, then your custom CSS:

<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Load Bootstrap FIRST -->
  <link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
  <!-- Then load your custom CSS -->
  <link rel="stylesheet" type="text/css" href="Main.css">
</head>

2. Use More Specific CSS Selectors #

Bootstrap's default styles use specific selectors (like .navbar.navbar-light) that have higher specificity than your simple .navbar rule. Even with the correct import order, your styles might still get ignored if they're less specific.

Update your custom CSS to target Bootstrap's navbar classes directly. For example, if you use Bootstrap's built-in fixed-top class (which handles fixed positioning for you—no need to write position: fixed yourself!), your CSS would look like this:

/* Override Bootstrap's navbar styles with a more specific selector */
.navbar.fixed-top {
  background-color: #333;
  width: 100%;
}

/* Style links inside the fixed Bootstrap navbar */
.navbar.fixed-top .nav-link {
  color: #f2f2f2;
  padding: 14px 16px;
  text-align: center;
}

/* Hover state for links */
.navbar.fixed-top .nav-link:hover {
  background-color: #ddd;
  color: black;
  text-decoration: none;
}

/* Adjust main content to avoid overlap with fixed navbar */
.main {
  margin-top: 70px; /* Bootstrap's navbar has a default height, so use a larger margin */
}

3. Leverage Bootstrap's Built-in Classes #

You don't need to reinvent the wheel for features like fixed top positioning or responsiveness—Bootstrap has ready-made classes for this:

• Add fixed-top to your navbar element to make it stick to the top.
• Use navbar-expand-md (or sm/lg/xl) to make the navbar collapse on smaller screens (responsive behavior).

Here's how your navbar HTML should look to use these classes:

<nav class="navbar navbar-expand-md fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Your Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

4. Double-Check File Paths #

If your styles still aren't loading, right-click your Main.css file in Visual Studio, select Copy Full Path, then paste it into the href attribute of your link tag to ensure the path is correct. For example:

<link rel="stylesheet" type="text/css" href="C:/YourProjectFolder/Main.css">

Once you confirm it works, switch back to the relative path (like Main.css) for portability.

Quick Debugging Tip #

Use your browser's dev tools (press F12) to inspect the navbar element. Look at the "Styles" tab—if your custom rules are crossed out, that means they're being overwritten by higher-specificity Bootstrap styles. If they don't show up at all, your CSS file isn't loading correctly (path issue).

内容的提问来源于stack exchange，提问作者SpicyDorito