引导网格布局中的面板

Question

使用引导程序布局系统来完成这样的事情的正确方法是什么： 也就是说，我想将面板放置在网格布局中，但也有面板内容的网格布局方法。

我应该有嵌套网格吗？所有列都需要在一行内吗？面板可以跨越顶级网格中的多行吗？每个面板是否应包含自己的12列网格？等等。似乎有很多方法可以实现这一目标，但我想知道最佳实践。

Answer 1

这将为您提供所需的网格样式：（已编辑）

<div class="row">
    <div class="col-xs-6">
        <!-- START PANEL 1 -->
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div> 
                </div>
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div> 
                </div>
            </div>
        </div>
         <!-- END PANEL 1 -->

        <!-- START PANEL 3 -->
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-3">Dummy Content</div>
                    <div class="col-xs-3">Dummy Content</div>
                    <div class="col-xs-3">Dummy Content</div>
                    <div class="col-xs-3">Dummy Content</div>
                </div>
            </div>
        </div>
        <!-- END PANEL 3 -->
    </div>
    <div class="col-xs-6">
        <!-- START PANEL 2 -->
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div>
                </div>
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div>
                </div>
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div>
                </div>
            </div>
        </div>        
        <!-- END PANEL 2 -->
    </div>
</div>