Html 如何使用引导网格实现此设计?

Html 如何使用引导网格实现此设计?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想实现下面的网格结构 为此,我采用了以下方法: <div class="col-lg-8"> <div class="col-lg-6"> <div class="panel panel-primary"> <!-- Default panel contents --> <div class="panel-heading"> .

我想实现下面的网格结构

为此,我采用了以下方法:

<div class="col-lg-8">
    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="panel panel-primary">

         <!-- Default panel contents -->
        <div class="panel-heading">
            ....
        </div>

        <div class="panel-body">
            ....
        </div>
    </div>
</div>

....
....
....
....
....
....
....
....
....
....
我面临的问题是,实现了这种网格结构,但所有面板/框未对齐


如何使所有Div/面板的底部对齐???

您应该添加行Div来定义行


....
....
....
....
....
....
....
....
....
....

我使用自己的css属性查看示例

代码如下:

<style>
.pad1{
    margin: 2px 2px 2px 2px;
    border: 1px solid #000;
    min-height: 100px;
}
.pad2{
    margin: 2px 2px 2px -130%;
    border: 1px solid #000;
    min-height: 204px;
}
</style>

.pad1{
保证金:2px2px2px2px2px;
边框:1px实心#000;
最小高度:100px;
}
.pad2{
利润率:2px2px2px-130%;
边框:1px实心#000;
最小高度:204px;
}

块可以有固定的高度吗?你应该在容器类和行类中包含你的代码。对我来说似乎还可以:@Suvojit:你也希望在小屏幕中使用相同的布局吗?哦,当然不适合:(