Bootstrap 导航栏留空 space

Question

我的导航栏和下一个分区之间有一个空白 space。我不知道它来自哪里，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
 
<!-- Navigation bar -->
<div id = "menu"> 
  <nav class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> 
        <a class="navbar-brand" href="/">Menu</a>
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          <li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
          <li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
        </ul>

       <ul class="nav navbar-nav navbar-right">
          <li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
          <li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
        </ul>
      </div>
  </nav>
</div>

<div style = "background-color: red">
  Empty space above me !
</div>

</body>
  
</html>

我要添加这些额外的行，因为我的 post 在 posting 之前需要更多细节...那到底是什么...

Answer 1

首先要小心你有加载错误：未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery（匿名函数）@ bootstrap.min.js:6

试试这个，我将 class 添加到导航中，避免 margin-bottom :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
     .margin-bottom-0 {
         margin-bottom: 0;
     }
</style>
</head>
<body>
 
<!-- Navigation bar -->
<div id = "menu"> 
  <nav class="navbar navbar-default margin-bottom-0">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> 
        <a class="navbar-brand" href="/">Menu</a>
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          <li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
          <li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
        </ul>

       <ul class="nav navbar-nav navbar-right">
          <li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
          <li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
        </ul>
      </div>
  </nav>
</div>

<div style = "background-color: red">
  Empty space above me !
</div>

</body>
  
</html>

Bootstrap 导航栏留空 space

Bootstrap navigation bar leaves an empty space

space

nav