bootstrap php包含侧边栏
Okay, so this is a first for me. Using php includes.
The problem I'm running into is that the content for the page is being pushed down onto another row when i include the sidebar.php.
This is the code for the side bar. The content means pretty much nothing now, because I'll probably change a couple of things. But the col-md-3 class is the thing that most confusing, because it should in theory work in tandem with the pages col-md class.
<?php include('head.php'); ?>
<!--- Start of accordion ---->
<div class="container">
<div class="panel-group col-md-3 panel_custom_group" id="accordian">
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#apparel" data-toggle="collapse" data-parent="#accordian">APPAREL <span class="panel_plus">+</span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="apparel">
<div class="panel-body">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#allproducts" data-toggle="collapse" data-parent="#apparel">ALL PRODUCTS <span class="panel_plus">+</span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="allproducts">
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#headwear" data-toggle="collapse" data-parent="#accordian">HEADWEAR<span class="glyphicon glyphicon-plus side_bar_glyph"></span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="headwear">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#bags" data-toggle="collapse" data-parent="#accordian">BAGS<span class="glyphicon glyphicon-plus"></span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="bags">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#gifts" data-toggle="collapse" data-parent="#accordian">GIFTS<span class="glyphicon glyphicon-plus"></span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="gifts">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#brands" data-toggle="collapse" data-parent="#accordian">BRANDS<span class="glyphicon glyphicon-plus"></span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="brands">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#categories" data-toggle="collapse" data-parent="#accordian">CATEGORIES<span class="glyphicon glyphicon-plus"></span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="categories">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#specials" data-toggle="collapse" data-parent="#accordian">SPECIALS<span class="glyphicon glyphicon-plus"></span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="specials">
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<!--- end of accordian ---->
And this is the page i inserted it into.
<?php include('head.php'); ?>
<div class="breadcrumb">
<p>Home > Registration</p>
</div>
<section class="container registr_middle col-md-6">
<img class="img-responsive" src="images/become_a_partner_banner.jpg" title="Become a Partner" alt="Become a Partner" />
</section>
<section class="registr_side col-md-3">
<div>
<h3>Partner Registration</h3>
<p>Becoming an Altitude partner can be a life changing event. As Altitude Leisurewear is a sincerely TRADE ONLY SUPPLIER the criteria to become an Altitude agent.<br />
In order to register as an approved distributor of the Altitude Leisure Wear brand, you will be required to complete the following documentation.<br />
Once completed, the following information must be signed and faxed to: <strong>086 580 0596</strong>.<br /></p>
<p class="background_para">Any incomplete application forms will be disregarded</p>
<ul>
<li>A signed copy of our client profile document</li>
<li>A signed copy of our standard terms and conditions</li>
<li>A copy of company Registration(CK Form)</li>
<li>A company profile verifying that our primary business is the resale of corporate and promotional products.</li>
<li>A copy of your business card</li>
<li>A copy of your ID document</li>
<li>An invoice os order to a client or from a supplier showing that you re-sell sorporate wear</li>
</ul>
<p>Please complete the application form below to register with Altitude Leisure Wear. A Customer Care representative will forward you the documentation that needs to be completed in order to do the verification of your status.</p>
</div>
</section>
So shouldn't the side bar's width work with the main content of the pages width. They both add up to 12 (for the grid system).
I think you shoudn't use .container and .col-md-6 on the same element.
It should look like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">First half</div>
<div class="col-md-6">Second half</div>
</div>
</div>
I let it work by putting a 'div' with the class of 'col-md-3' around the include line and then wrapped all the contents in a container div. I then removed the 'col-md-3' in the sidebar.php file.
<div class="col-md-3">
<?php include('sidebar.php'); ?>
</div>