dongpingwu8378 2015-01-28 11:09
浏览 37

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

An image for a better understanding

  • 写回答

2条回答 默认 最新

  • duanlang1196 2015-01-28 11:52
    关注

    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>
    

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

    评论

报告相同问题?

悬赏问题

  • ¥20 模型在y分布之外的数据上预测能力不好如何解决
  • ¥15 processing提取音乐节奏
  • ¥15 gg加速器加速游戏时,提示不是x86架构
  • ¥15 python按要求编写程序
  • ¥15 Python输入字符串转化为列表排序具体见图,严格按照输入
  • ¥20 XP系统在重新启动后进不去桌面,一直黑屏。
  • ¥15 opencv图像处理,需要四个处理结果图
  • ¥15 无线移动边缘计算系统中的系统模型
  • ¥15 深度学习中的画图问题
  • ¥15 java报错:使用mybatis plus查询一个只返回一条数据的sql,却报错返回了1000多条