我的代码在html文件中工作正常,页眉和页脚代码在产品页面中。问题是如果我在php文件中创建它,侧导航栏将无法工作,我已经尝试在产品页面中移动body标签,但它仍然无法正常工作。感谢任何帮助:)
标题-ee.php
<html>
<head>
<?php
include('parameters.php');
?>
<title> <?php echo $page_title; ?> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?= $server_addr ?>/common/css/bootstrap.css">
<script src="<?= $server_addr ?>/common/js/jquery-3.2.1.js"></script>
<script src="<?= $server_addr ?>/common/js/bootstrap.js"></script>
<script src="js/ee-home.js"></script>
<link rel="stylesheet" href="css/ee-home.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<!--Start header-->
<nav class="navbar navbar-default navigation-bar">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-xs-12 col-sm-12 col-md-12 col-lg-6 centered-a">
<div class="row">
<div class="col-sm-3 centered-a">
<img src="img/ee-logo.png">
</div>
<div class="col-sm-9">
<h1 id="nav-brand">
EQUIPMENT ENGINEERS, INC.</br>
</h1>
<h1 id="nav-brand-subtitle">
<small>
Your Reliable Solutions Partner
</small>
</h1>
</div>
</div>
<a href="#">
<span class="link-spanner"></span>
</a>
</div>
<div class="navbar-header col-lg-6 visible-lg centered-a">
<div class="row centered-a" id="nav-box">
<div class="col-lg-2 centered-a">
<a href="#">
<p>Home</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Our Company</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>SCM</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Products</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Inquiries</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a" id="last-item">
<a href="#">
<p">Supplier Accreditation</p>
<span class="link-spanner"></span>
<a>
</div>
</div>
</div>
</div>
<div class="panel-group col-md-12 centered-a hidden-lg">
<div class="panel panel-default">
<div class="panel-heading" >
<h2 class="panel-title centered-a">
<span class="glyphicon glyphicon-triangle-bottom"></span>
<a data-toggle="collapse" href="#collapse1">
<span class="link-spanner"></span>
<a>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
Home
<a href="#"><span class="link-spanner"></span></a>
</li>
<li class="list-group-item">
Our Company
<a href="#"><span class="link-spanner"></span></a>
</li>
<li class="list-group-item">
SCM
<a href="#"><span class="link-spanner"></span></a>
</li>
<li class="list-group-item">
Products
<a href="#"><span class="link-spanner"></span></a>
</li>
<li class="list-group-item">
Inquiries
<a href="#"><span class="link-spanner"></span></a>
</li>
<li class="list-group-item">
Supplier Accreditation
<a href="#"><span class="link-spanner"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!--End header-->
products.php
<?php include("includes/header-ee.php"); ?>
<link rel="stylesheet" href="products.css"></link>
<div class="container-fluid">
<div class="row">
<!--Sidebar-->
<nav class="col-md-3" id="myScrollspy">
<span>Product Lineup</span>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<!--Content-->
<div class="col-md-9">
<div id="section1">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
<div id="section2">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
</div>
</div>
</div>
<?php include("includes/footer-ee.php"); ?>
页脚-ee.php
</body>
<footer>
<div class="footer-blk row">
<div style="float: none;text-align: center;">
Home | Terms and Conditions | Privacy Policy
</div>
<div style="float: none;text-align: center;">
</div>
</div>
</footer>