Bootstrap 即使在全新安装时，默认导航栏也小于默认情况下应有的大小

Question

您好，我正在开发一个使用 Node.js、expressJS、jquery v2.1.3 和 twitter-bootstrap v3.3.2 的移动网络应用程序。昨晚我注意到每当我测试应用程序时，我使用的导航栏看起来比我过去使用的所有其他 bootstrapped 导航栏小（文本更小，它应该折叠时的高度），并且它没有正常折叠。很明显，我开始检查所有我能检查的东西，想看看这个导航栏异常是从哪里来的。所以对情况有更多的了解。如果我选择了角落或我的浏览器 window 并拖动它以使其正确调整导航栏功能的大小。如果我使用 chrome 在移动设备模式下检查它，或者使用我的移动设备上的浏览器访问它们表现不佳的应用程序。一旦我的导航栏难住了我，我决定创建一个新的空 Web 应用程序，让它只包含一个导航栏和一些填充文本，以删除我的导航栏可能继承的我不知道的任何代码。这也失败了。我上网下载了 jquery 和 bootstrap 的新 dist，并将它们放入项目中。然后我从 bootply.com 获取了默认导航栏的样板代码并将其添加进去。即使在我的新安装示例中，这也不起作用。当应用程序在移动设备上运行或作为移动设备在 chrome 中检查时，我遇到了同样的问题，导航栏的大小小于应有的大小，但当我只需简单地调整浏览器的大小以模仿移动设备。下面我包括了以下内容：

[Link 到托管在 Heroku 上的应用程序。][2]

相关代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>

<script type="text/javascript" src="/jQuery/dist/jquery.js">  </script>
<script type="text/javascript" src="/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/bootstrap.css"/>

</head>

<body><!--Body starts here-->

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container" style="margin-top:50px">
  <div class="text-center">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any      new project.<br> All you get is this text and a mostly barebones HTML  document.</p>
  </div>

</div><!-- /.container -->

编辑 1 个更有见地的信息，感谢 Hager Aly 的创意。 [这是一张 link 的 imgur 相册。][3]它包含两个屏幕截图。一个是当我检查我的应用程序的导航栏时，另一个是当我检查 getbootstrap.com 上的默认导航栏时。当我从移动设备访问我的应用程序时，它看起来与第一个屏幕截图相同。在过去它总是看起来像第二个。

如果我能提供更多信息，请告诉我。感谢您提前抽出时间。此致，

--弗雷德克

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1">

将该行添加到头部元素

Answer 2

我解决了我的问题。我认为问题出在我使用的 bootstrap 发行版中的某个地方。我删除了从 getbootstrap.com 获得的分发版，并使用 Bower 下载了一个。安装新的 bootstrap dist 后，导航栏会再次相应地运行。我知道这个答案可能没有多大帮助，但我相信我最初的 bootstrap 分发文件中缺少一些东西。

Condensed：我使用的 bootstrap 文件无法正常工作。获取它们的工作版本或使用可靠的 CDN 使我的导航栏能够正常运行。

Bootstrap 即使在全新安装时，默认导航栏也小于默认情况下应有的大小

Bootstrap default navbar is smaller than it should be by default even on fresh install

html

jquery

express

twitter-bootstrap

twitter-bootstrap-3