javascript - Bootstrap 模式是否显示取决于 bootstrap 版本

Question

我对网络编程比较陌生，因此我使用了几个模板来创建我的网站，所有这些模板都与 Twitter Bootstrap 相关。

我的登录页面正确显示 Bootstrap 模式。这些是我在那里使用的导入:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>

登录后主页出现问题。它取自另一个模板，并使用以下导入:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>

如您所见，唯一的变化是 Bootstrap 的来源。在第一种情况下，我将其下载到 css 文件夹，而在第二种情况下，它是直接从服务器获取的。

因此，模态框不会显示在主页(第二个页面)中。屏幕逐渐变黑，但不显示任何模式。

如果我修改主页的导入以从 css 文件夹而不是服务器获取 Bootstrap，模态确实会显示，但整个页面的布局会被破坏:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>

而不是这个:

有什么想法吗？

Answer 1

您是否在页面的 head 标签中添加了用于响应式的元标签。如果没有，请尝试将以下元标记添加到页面的 head 标记中。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

希望这能解决您的问题。

注意:首先尝试将其添加到您导入 Bootstrap 下载文件的版本中。