引导网格图片附加

Question

我在使用bootstrap Grid时遇到了一些问题。见下图

，

让我告诉你我想做什么，但我不能，我希望它像下图。第1行占用页面的70％，另一行占30％。

和列填充行＆＃34;相同的高度＆＃34;，参见＆＃34; Demo2.jpg＆＃34;理解我=（

注意：我还在学习，抱歉给您带来不便。 我的代码：     

    <div class="col-md-6">
    <div class="panel panel-flat border-top-info border-bottom-info">

                            <div class="panel-heading ">
                                <h6 class="panel-title">PANEL 1 </h6>
                            </div>
                            <div class="panel-body" >
                                <div id="container"></div>
                            </div>
                        </div>
    </div>


    <div class="col-md-4">
        <div class="row">
            <div class="col-md-6 ">
            <div class="panel border-top-info border-bottom-info" >
                            <div class="panel-heading ">
                                <h6 class="panel-title">PANEL 2 </h6>
                            </div>


                        </div>
            </div>
            <div class="col-md-6">
            <div class="panel border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">PANEL 3 </h6>
                            </div>


                        </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
            <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">PANEL 4 </h6>
                            </div>


                        </div>
            </div>
            <div class="col-md-6">
            <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">PANEL 5 </h6>
                            </div>


                        </div>
            </div>
        </div>
    </div>
    <div class="col-md-2">
    <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">PANEL 6 </h6>
                            </div>


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

<div class="row">
    <div class="col-md-2">
    <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">Top and bottom borders</h6>
                            </div>

                            <div class="panel-body">
                                Panel with top and bottom <code>info</code> borders
                            </div>
                        </div>
    </div>
    <div class="col-md-2">
    <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">Top and bottom borders</h6>
                            </div>

                            <div class="panel-body">
                                Panel with top and bottom <code>info</code> borders
                            </div>
                        </div>
    </div>
    <div class="col-md-2">
    <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">Top and bottom borders</h6>
                            </div>

                            <div class="panel-body">
                                Panel with top and bottom <code>info</code> borders
                            </div>
                        </div>
    </div>
    <div class="col-md-4">
    <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">Top and bottom borders</h6>
                            </div>

                            <div class="panel-body">
                                Panel with top and bottom <code>info</code> borders
                            </div>
                        </div>
    </div>
    <div class="col-md-2">
    <div class="panel panel-flat border-top-info border-bottom-info">
                            <div class="panel-heading">
                                <h6 class="panel-title">Top and bottom borders</h6>
                            </div>

                            <div class="panel-body">
                                Panel with top and bottom <code>info</code> borders
                            </div>
                        </div>
    </div>
</div> 

Answer 1

您正在使用col-md-指令作为垂直尺寸，但这不起作用。 col-part代表列，因此所有操作都是元素的宽度。我不知道任何指令允许你在高处做同样的事情......

Answer 2

我认为你需要一个容器div。

它是容器或容器流体类。