Twitter Bootstrap 3 折叠行无法正常工作答案

【问题标题】：Twitter Bootstrap 3 Collapsing Rows Doesn't Work ProperlyTwitter Bootstrap 3 折叠行无法正常工作
【发布时间】：2014-08-06 09:25:21
【问题描述】：

我正在尝试创建一个表格，其中的行可以在按下按钮时展开和折叠，就像在 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) 作为类添加到单元格并不能解决问题。

请告诉我如何解决它/我哪里出错了。

【问题讨论】：

标签： css html twitter-bootstrap html-table

【解决方案1】：

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

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

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

【讨论】：

它在您创建的 jsFiddle 中有效，但在我复制它并将其作为 HTML 页面并在浏览器（Chrome 和 Firefox）上运行时无效。我复制并粘贴了您的确切代码
你能准确地发布你放在哪里的东西，也许在你的问题中作为编辑。否则我只能建议在 Firebug 或其他开发人员工具中检查它，看看该类是否实际被使用，或者它是否被其他东西覆盖