html - 壊れたレイアウトが多すぎる場合のタブのブートストラップ

Question

Bootstrap と themedesigner.in/demo/matrix-admin/index.html このテーマを使用して、次のようなタブ パネルを作成したい: http://scr.hu/1det/63r1uしかし、さらにタブ レイアウトを追加すると、破棄された: http ://scr.hu/1det/d2s8w これは私のコードです:

    <div class="widget-box">
    <div class="widget-title">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab0">test1</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test2</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
            <li><a data-toggle="tab" href="#tab0">test3</a></li>
        </ul>
    </div>
    <div class="widget-content tab-content">
        <div id="tab0" class="tab-pane">
            <div class="widget-content nopadding">
                <table class="table table-bordered">
                    <thead>
                    <div colspan="8">
                        <div style="margin-bottom: 10px; float: left; align-content: center;">

                            <button class="btn btn-sm btn-primary" id="checkAllBox">
                                <strong>CLICK HERE</strong>
                            </button>
                        </div>
                        <div style="margin-bottom: 10px;float: right;">
                            <strong>A:</strong>
                            {!! Html::linkRoute('copy', 'ON', [1], array('class'=>'btn btn-xs btn-info')) !!}
                            {!! Html::linkRoute('edit', 'OFF', [2], array('class'=>'btn btn-xs btn-warning')) !!}
                        </div>
                    </div>
                    <tr>
                        <th style="width:20px;"><span class="icon"><i class="icon-ok"></i></span></th>
                        <th>#</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="odd gradeA" style="text-align: center;">
                        <td style=""><input type="checkbox"></td>
                        <td>1</td>
                        <td>123</td>
                        <td>test</td>
                        <td>daadads</td>
                        <td>Delete|edit|etc</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

だから私は何を変更する必要があり、私が言ったように、私はLaravel/Bootstrapとこのレイアウトを使用しています。