css - 如何在 bootstrap 3 中创建垂直面板列表

Question

在 bootstrap 3 中，我正在尝试创建一个垂直面板列表，如 link 所示用于搜索结果过滤器。它有一个主面板和这个主面板内的多个面板。我正在尝试以下 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>

Answer 1

我发现缺少一个 div，您可能应该在父 div 标记中定义列以修复格式问题。这是带有解决方案的 JSFiddle:http://jsfiddle.net/hbqau1h6/1/

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