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>

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

1 个答案: