Twitter bootstrap 引导网格布局中的面板

使用引导布局系统完成以下任务的正确方法是什么： 也就是说，我希望将面板定位在网格布局中，但也希望对面板内的内容采用网格布局方法

---

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

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

小组标题
虚拟内容
虚拟内容
虚拟内容
虚拟内容
小组标题
虚拟内容
虚拟内容
虚拟内容
虚拟内容
小组标题
虚拟内容
虚拟内容
虚拟内容
虚拟内容
虚拟内容
虚拟内容

我实际上想知道如何将实际的引导面板组件合并到混合中。带有类别、面板、面板标题和面板主体。我尝试过在这些类中添加div，但您已经对它们进行了注释，但它们无法正常工作。

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