如何使用Bootstrap Grid实现此设计？

Question

我想实现以下网格结构，

我已经使用以下方法来实现这一目标：

<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 / Panel的底部对齐？

Answer 1

您应该添加Row div来定义行

＆＃13;

＆＃13;

<div class="row">
	<div class="col-lg-8">
		<div class="row">
			<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="row">
			<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>
	<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这里是代码：

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