如何在bootstrap 3 css中生成以下布局

时间:2016-09-20 05:44:04

标签: html css twitter-bootstrap-3

我正在尝试在bootstrap 3 css中生成以下布局,但是侧栏总是很小,并且它没有正确扩展,并且在移动模式中存在问题如何继续。提前谢谢。

enter image description here

注意: 这就是我试过的

    <div style="display:table;height:100%;width:100vw">
        <div style="display:table-row-group;height:100%;width:100vw">
               <div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div>
               <div class="col-sm-10 col-md-10 col-lg-11half">
<div id="prdgrid">
        <breadcrumbs path=prd.path ></breadcrumbs>

    <div class="row" style="width: 100%;height:100%">
        <div class="leftcol">
            <div class="infotile" style="height: 25%;">
                <infotile></infotile>
            </div>

        <div class="detail" style="height:31%">
            <details></details>
        </div>

        <div>
            <match></match>
        </div>

    </div>

        <div class="rightcol" style="height:100%">
         <div class="pricetile hidden-xs">
             <pricechart></pricechart>
         </div>


            <div class="rightbottomcol" style="height:51%">
                <div class="rev">
                    <div class="title">
                        <tile></tile>
                    </div>
                </div>

                <div class="rev" style="height: 100%;">
                    <pd></pd>
                </div>
        </div>
    </div>
    </div>
</div>
        </div>           
    </div>

2 个答案:

答案 0 :(得分:0)

您必须使用Bootstrap Grid和Panel for Same Layout而不是创建自己的CSS布局。请参阅链接:https://getbootstrap.com/examples/grid/http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

答案 1 :(得分:0)

这就是你的代码应该是这样的:

'user_id' => isset($_POST['team_leads'][$key]) ? $_POST['team_leads'][$key] : 0,