创建包含两列的面板

Question

我正在尝试创建一个在面板中有两列的模板。我使用普通<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading">Overview </div> <div class="panel-body"> </div> <div class="container-fluid"> <div class="col-md-2"> <table class="table"> <thead> <tr> <th> # </th> <th> Product </th> <th> Payment Taken </th> <th> Status </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> TB - Monthly </td> <td> 01/04/2012 </td> <td> Default </td> </tr> </tbody> </table> </div> <div class="col-md-10"> <div class="tabbable" id="tabs-305570"> <ul class="nav nav-tabs"> <li class="active"> <a href="#panel-495769" data-toggle="tab">Section 1 </a> </li> <li> <a href="#panel-207616" data-toggle="tab">Section 2 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="panel-495769"> <p> I'm in Section 1. </p> </div> <div class="tab-pane" id="panel-207616"> <p> Howdy, I'm in Section 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>。您可以在下面找到我尝试的内容：

min

但是，我的面板在我的屏幕上显示如下：

如您所见，在我的面板中，内部的两列重叠。

为什么我的桌子和部分重叠这么多？

感谢您的回复！

Answer 1

因为您正在使用{{1>}包裹table 无响应，而.col-md-2是响应级。

所以你必须用.table-responsive（一个用于使表响应的引导类）包装它，检查更新的片段：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Overview
                </div>
                <div class="panel-body">
                </div>
                <div class="container-fluid">
                    <div class="col-md-2">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Product
                                        </th>
                                        <th>
                                            Payment Taken
                                        </th>
                                        <th>
                                            Status
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            1
                                        </td>
                                        <td>
                                            TB - Monthly
                                        </td>
                                        <td>
                                            01/04/2012
                                        </td>
                                        <td>
                                            Default
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="tabbable" id="tabs-305570">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#panel-495769" data-toggle="tab">Section 1
                      </a>
                                </li>
                                <li>
                                    <a href="#panel-207616" data-toggle="tab">Section 2
                      </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="panel-495769">
                                    <p>
                                        I'm in Section 1.
                                    </p>
                                </div>
                                <div class="tab-pane" id="panel-207616">
                                    <p>
                                        Howdy, I'm in Section 2.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助：）

Answer 2

问题是你的列，包装表和<div class="col-md-6">中的部分在引导网格系统中定义<div class="col-md-12"></div>时，这是一个完整的网格（引导程序最大网格）所以为了从中获得两个相等的列，您只需使用<div class="col-md-6"></div>定义两列。 Reference

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Overview
                </div>
                <div class="panel-body">
                </div>
                <div class="container-fluid">
                    <div class="col-md-6">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>
                                        #
                                    </th>
                                    <th>
                                        Product
                                    </th>
                                    <th>
                                        Payment Taken
                                    </th>
                                    <th>
                                        Status
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        1
                                    </td>
                                    <td>
                                        TB - Monthly
                                    </td>
                                    <td>
                                        01/04/2012
                                    </td>
                                    <td>
                                        Default
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <div class="tabbable" id="tabs-305570">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#panel-495769" data-toggle="tab">
                                        Section 1
                                    </a>
                                </li>
                                <li>
                                    <a href="#panel-207616" data-toggle="tab">
                                        Section 2
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="panel-495769">
                                    <p>
                                        I'm in Section 1.
                                    </p>
                                </div>
                                <div class="tab-pane" id="panel-207616">
                                    <p>
                                        Howdy, I'm in Section 2.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

注意：将代码段作为整页运行