Css 如何在bootstrap 3中创建面板的垂直列表

在Bootstrap3中，我试图创建一个垂直面板的列表，这可以在搜索结果过滤器上看到。它有一个主面板和该主面板内的多个面板。我正在尝试以下html和样式，但无法创建所需的面板布局。有什么想法吗？谢谢

<div class="panel panel-default col-md-3">
    <div class="panel-heading">Refine Search</div>
    <div class="panel-body">

        <div class="panel panel-default">
            <!-- Default panel contents 1 -->
            <div class="panel-heading">Panel heading 1</div>
            <div class="panel-body">
                <p>...</p>
            </div>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents 2 -->
            <div class="panel-heading">Panel heading 2</div>
            <div class="panel-body">
                <p>...</p>
            </div>
        </div>

    </div>
</div>

优化搜索
小组标题1

小组标题2

我发现缺少一个div，您可能应该在父div标记中定义列，以解决格式问题。下面是解决方案的JSFIDLE：

优化搜索
小组标题1

小组标题2

搜索结果
...

很可笑，这个答案没有足够的投票权。你让我开心！

<div class="row">
    <div class="col-md-3"><!-- Added containing column definition -->
        <div class="panel panel-default">
            <div class="panel-heading">Refine Search</div>
            <div class="panel-body">

                <div class="panel panel-default">
                    <!-- Default panel contents 1 -->
                    <div class="panel-heading">Panel heading 1</div>
                    <div class="panel-body">
                        <p>...</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <!-- Default panel contents 2 -->
                    <div class="panel-heading">Panel heading 2</div>
                    <div class="panel-body">
                        <p>...</p>
                    </div>
                </div>

            </div> <!-- Missing div here -->
        </div>
    </div>
    <div class="col-md-9">
        <h2>Search results</h2>
        ...
    </div>
</div>