Bootstrap导航栏下方出现白边，设置margin-bottom:0仍无效，求助解决

Hey there, let's get rid of that frustrating white space under your navbar! I took a look at your code, and the main culprit here is the order of your CSS file imports—you're loading your custom styles before Bootstrap's core CSS, which means Bootstrap's default .navbar styles (including a margin-bottom: 20px) are overriding your margin-bottom: 0 rule.

Here's how to fix it step by step:

1. Fix the CSS Loading Order #

Move your custom stylesheet to after Bootstrap's CSS. This ensures your custom rules take precedence over Bootstrap's defaults:

<!-- Load Bootstrap first -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Then your custom styles -->
<link rel="stylesheet" href="css/style.css">

2. Strengthen Your Navbar Style (Optional) #

If adjusting the order doesn't fully resolve it, you can boost the specificity of your .navbar rule to make sure it sticks. You can also remove any default border if that's contributing to the gap:

.navbar.navbar-inverse {
  margin-bottom: 0;
  border-radius: 0;
  border: none; /* Removes any default border on the navbar */
}

3. Check for Other Potential Gaps #

If you still see a white edge, double-check these common spots:

• Browser default body margin: Most browsers add margin: 8px to the <body> tag. Reset it with:

  body {
    margin: 0;
  }
  

• Top margin on the container below: The .container-fluid or .row.content might have an unexpected top margin. Reset it with:

  .container-fluid.text-center {
    margin-top: 0;
  }
  

Modified Working Code Example #

Here's your full code with the fixes applied:

CSS (style.css)

@charset "utf-8";
/* CSS Document */
* {
  border-radius: 0 !important;
}

body {
  margin: 0; /* Reset default body margin */
}

.navbar.navbar-inverse {
  margin-bottom: 0;
  border-radius: 0;
  border: none; /* Remove default navbar border */
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
  height: 450px
}

/* Set gray background color and 100% height */
.sidenav {
  padding-top: 20px;
  background-color: #f1f1f1;
  height: 100%;
}

/* Set black background color, white text and some padding */
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {
    height: auto;
  }
}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>index</title>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container-fluid text-center">
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>
</body>
</html>

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