Question

在以下网站http://www.bestcastleintown.co.uk/excelsa/index.php

上

响应式导航栏（http://getbootstrap.com/2.3.2/components.html#navbar）组件似乎无法正常工作，即使我已包含满足2个要求。崩溃插件是整体缩小的JavaScript文件的一部分，也包含了响应式Bootstrap CSS文件。

必需的响应式CSS

<link href="./css/bootstrap-responsive.min.css" rel="stylesheet">

必需的JavaScript

<link href="./js/bootstrap.min.js" rel="stylesheet">

然而，当在979px及以下的较小视口中观看该网站时，该小方块包含了＃34;热狗＆＃34;图标不会下拉并在单击时显示导航项。

Answer 1

首先，您需要使用jQuery，以便导航栏可以使用按钮引导程序提供向下滑动。你需要做的就是从这个站点（这是jQuery）保存这个文件，它应该可以正常工作。

将文件从此保存到您的js文件夹中，并确保它名为jquery.min.js：

http://code.jquery.com/jquery-1.11.1.min.js

完成后，只需将jQuery链接到索引文件中即可。只要确保你这样链接：

<!DOCTYPE html>
<html>
 <head>
    <title>Site</title>
    <link href="css/boostrap.min.css" rel="stylesheet">
 </head>
<body>

<!-- JS at end of page for faster page loading -->
<script src="js/jquery.min.js"></script>
<script src="js/boostrap.min.js"></script>
</body>
</html>

并且您的javascript标记需要位于页面的末尾。正如我在这个例子中所做的那样。

或者，如果它仍然不起作用：

然后我认为你可能有一些错误的代码，因为你正在写你的标签“./css/bootstrap-responsive.min.css”是什么。就在你的css前面？你可以去getboostrap.com，下载3.0.2版本，并确保你写的文件所在的正确位置。确保您的索引文件在所有其他文件夹之外，并且您拥有bootstrap提供的单独的css和js文件夹，然后您可以链接文档头部的文件。

这样做:(只需确保您的index.html不在所有其他文件和文件夹中，并且您的css和js也在外面）

<link href="css/boostrap.min.css" rel="stylesheet">

示例：（* star表示文件夹）

*css
*fonts
*js
index.html

此外，请确保您在其网站上下载最新版本的bootstrap：getboostrap.com。为了确保您了解bootstrap 3，您应该阅读bootstraps新的网格系统。 http://www.getboostrap.com/css/#grid

如果有帮助，请告诉我 -M。

Bootstrap 2.3.2响应式导航栏无法正常工作

1 个答案: