如果太多布局损坏,请使用Boostrap标签

时间:2017-06-27 15:36:40

标签: html bootstrap-grid

所以我使用了boostrap和themedesigner.in/demo/matrix-admin/index.html这个主题我想制作这样的标签面板:http://scr.hu/1det/63r1u但如果我添加更多标签,则布局被销毁:{{3 }} 这是我的代码:

        <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 / Boostrap和这个布局themedesigner.in/demo/matrix-admin/index.html

0 个答案:

没有答案