Question

我正在尝试创建一个包含按钮的行可以展开和折叠的表，就像在Windows资源管理器中一样，按下文件夹旁边的“加号”将打开目录中的文件。

这是我写的：

    <!DOCTYPE html>
        <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title></title>

            <link rel="stylesheet" href="../asset/css/bootstrap.min.css"       type="text/css" />
            <link rel="stylesheet" href="../asset/css/trax.css" type="text/css" />
        </head>

        <body>

            <div class="container">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Test Results</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover">
                            <thead>
                            <tr>
                                <th class="col-md-7 text-left">Name</th>
                                <th class="col-md-1 text-right">Success</th>
                                <th class="col-md-1 text-right">Total</th>
                                <th class="col-md-1 text-right">Fail</th>
                                <th class="col-md-2 text-center">Trend</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr>
                                <td class="text-left">
                                    <button type="button" class="btn btn-default btn-        xs" data-toggle="collapse" data-target=".module,.first">
                                        +
                                    </button>
                                    Foo
                                </td>
                                <td class="text-right up"><span class="glyphicon    glyphicon-arrow-up"></span>80%</td>
                                <td class="text-right">5</td>
                                <td class="text-right">1</td>
                                <td class="text-center"><span class="inlinesparkline"    values="1,2,8,4,5,7,10"></span></td>
                            </tr>

                            <tr class="collapse out module first">
                                <td class="text-left col-md-7">Hi</td>
                                <td class="text-right up col-md-1"><span  class="glyphicon glyphicon-arrow-up"></span>95%</td>
                                <td class="text-right col-md-1">5</td>
                                <td class="text-right col-md-1">1</td>
                                <td class="text-center col-md-2"><span    class="inlinesparkline" values="1,2,3,4,5"></span></td>
                            </tr>

                            <tr>
                                <td class="text-left">Bar</td>
                                <td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td>
                                <td class="text-right">5</td>
                                <td class="text-right">2</td>
                                <td class="text-center"><span class="inlinesparkline"   values="10,5,7,12,6,4,2"></span></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript">        </script>
            <script src="../asset/js/bootstrap.min.js" type="text/javascript"></script>
            <script src="../asset/js/jquery.sparkline.js" type="text/javascript">        </script>
            <script src="../asset/js/app.js" type="text/javascript"></script>
        </body>
    </html>

所以，我设法让按钮显示一个新行，但是没有正确排列：表格单元格不像其他行那样根据表格标题单元格排列。但是当按下按钮时，在过渡期间，它会在调整回错误的间距之前自行排列。

将col-md-(number)添加到单元格中，因为类无法修复它。

请告诉我如何解决/我出错的地方。

Answer 1

这是一个有趣的。似乎有效的I found a similar question with an answer。我创建了一个jsFiddle来显示它的工作原理。基本上它涉及添加自己的CSS类来覆盖引导CSS并强制它显示为表格行。

table .collapse.in {
    display: table-row !important;
}

我不能说我特别喜欢这个解决方案，特别是使用!important，但它确实有用。在我链接到您的问题中有一个anohter解决方案，其中涉及向<div>添加<tr>一类可折叠，但我更不喜欢这种声音。

Twitter Bootstrap 3折叠行不能正常工作

1 个答案: