php - bootstrap php 包含侧边栏

Question

好的，所以这对我来说是第一次。使用 php 包含。

我遇到的问题是，当我包含 sidebar.php 时，页面内容被下推到另一行。

这是侧边栏的代码。内容现在几乎没有任何意义，因为我可能会更改一些内容。但是 col-md-3 类是最令人困惑的，因为理论上它应该与页面 col-md 类协同工作。

<?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 ---->

这是我插入的页面。

<?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>

所以侧边栏的宽度不应该与页面宽度的主要内容一起工作。它们加起来都是 12(对于网格系统)。

Answer 1

我认为你不应该在同一个元素上使用 .container 和 .col-md-6。

它应该是这样的:

<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>

http://getbootstrap.com/css/#grid