Bootstrap dropdown nav not working when included in php file
Question
Here, I have 2 files index.php and 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. Please help!
index.php file
<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 . But it does not work. Please help!
3 answers
solution1
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. Are they loaded correctly? If not, it probably has to do with your path.
solution2
0 2014-07-29 12:35:42
Did you include the bootstrap-dropdown.js? Try adding this line to the code
<script src="js/bootstrap-dropdown.js"></script>
solution3
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):
@import url('css/bootstrap.min.css');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.