Bootstrap下拉导航在包含在php文件中时不起作用
[英]Bootstrap dropdown nav not working when included in php file
问题描述
Here, I have 2 files index.php and pop_map.php. 
在这里，我有2个文件index.php和pop_map.php。 I have created index.php file using bootstrap and when I console it, it works fine but when I am trying to call it from pop_map.php file, where I have included index.php file, there is a gap in between header and nav bar and the dropdown button does not work. 我已经使用引导程序创建了index.php文件，当我对其进行控制台时，它可以正常工作，但是当我尝试从包含index.php文件的pop_map.php文件中调用它时，标头和导航之间存在间隙条和下拉按钮不起作用。 Please help! 请帮忙！
index.php file index.php文件
<html>
<head>
<title>Visualization</title>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<style type="text/css">
@media(max-width: 10px){
h1{
font-size: 22px;
font-color:blue;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="start navbar-default navbar-fixed-top" style="text-align:center;background-color:#006400;height:100px" >
<h1>Millenium Development Goal-7<br><small>Ensure Environmental Sustainability</small></br></h1>
<div class="navbar navbar-inverse navbar-static-top " style="background-color:#9ACD32" >
<a href="#" class="navbar-brand" style="color:008000">Home</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="pop_map.php" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Population
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="pop_map.php" style="color:#008000">Central</a></li>
<li><a href="#" style="color:#008000">Western</a></li>
<li><a href="#" style="color:#008000">Far-Western</a></li>
<li><a href="#" style="color:#008000">Mid-Western</a></li>
<li><a href="#" style="color:#008000">Eastern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Sanitation
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" style="color:#008000">Central</a></li>
<li><a href="#" style="color:#008000">Western</a></li>
<li><a href="#" style="color:#008000">Far-Western</a></li>
<li><a href="#" style="color:#008000">Mid-Western</a></li>
<li><a href="#" style="color:#008000">Eastern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Water
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" style="color:#008000">Central</a></li>
<li><a href="#" style="color:#008000">Western</a></li>
<li><a href="#" style="color:#008000">Far-Western</a></li>
<li><a href="#" style="color:#008000">Mid-Western</a></li>
<li><a href="#" style="color:#008000">Eastern</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src ="js/bootstrap.js"></script>
</body>
</html>
Now, in pop_map.php file, I have included this file using . 现在，在pop_map.php文件中，我使用包含了此文件。 But it does not work. 但这行不通。 Please help! 请帮忙！
3 个解决方案
解决方案1
0 2014-07-29 06:50:12
..you are probably using a wrong path to include the files. ..您可能使用了错误的路径来包含文件。 Right click on the loaded page, view source, and click on the bootstrap.min.css and bootstrap.js. 右键单击加载的页面，查看源代码，然后单击bootstrap.min.css和bootstrap.js。 Are they loaded correctly? 它们加载正确吗？ If not, it probably has to do with your path. 如果不是，则可能与您的路径有关。
解决方案2
0 2014-07-29 12:35:42
Did you include the bootstrap-dropdown.js? 您是否包含bootstrap-dropdown.js？ Try adding this line to the code 尝试将此行添加到代码中
<script src="js/bootstrap-dropdown.js"></script>
解决方案3
0 2015-10-30 12:25:33
Cross-check the path to your stylesheets. 交叉检查样式表的路径。 I experienced this problem once, and it seems tricky but it has a straight forward solution. 我曾经遇到过这个问题，似乎很棘手，但是它有一个直接的解决方案。 You're not linking properly to your stylesheets. 您没有正确链接到样式表。 View the page source from the browser and open the link to the bootstrap stylesheets, they probably wouldn't be found. 从浏览器查看页面源，并打开指向引导样式表的链接，可能找不到它们。
You can also just add this at the top of "style.css" before any code but after the stylesheet header (the comment): 您也可以将其添加到任何代码之前，但在样式表标题（注释）之后的“ style.css”顶部：
@import url('css/bootstrap.min.css');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.