Question

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

[链接到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的想法。 [这是一张imgur专辑的链接。] [3]它包含两个截图。一个是我正在检查我的应用程序的导航栏，另一个是我在检查getbootstrap.com上的默认导航栏时。当我从移动设备访问我的应用程序时，它看起来与第一个屏幕截图相同。在过去它总是看起来像第二个。

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

- Fredk

Answer 1

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

将该行添加到头元素

Answer 2

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

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

即使在全新安装时，Bootstrap默认导航栏也比默认情况下要小

2 个答案: