为什么可折叠Bootstrap面板中的表会改变宽度？

Question

我在这里放了一个Bootply演示:http://www.bootply.com/Ss2aAnzqlZ.

根据http://getbootstrap.com/components/#panels-tables,它是一个带有表格的面板.但是,我也让面板可以折叠.折叠位工作正常,但表本身不保留形状.正如您在Bootply中看到的那样,当您第一次加载页面时,它不会填充面板的宽度.单击面板标题中的"改进"以折叠面板时,该表在动画期间占据整个面板宽度,然后消失.当您再次单击以显示面板内容时,该表是动画停止前的全宽,此时,它会缩回到看起来像"自动"宽度的位置.

奇怪的是,检查表格元素表明表格本身是全宽的,但是thead,tbody和tfoot不是.

我有点跟踪表格中"崩溃"类的存在.如果在没有"折叠"类的情况下启动Bootply,则在折叠面板之前它是全宽的.当你展开它时,它会回到自动宽度.我不知道为什么......你呢？

这是片段,但崩溃似乎不会在这里运行.Bootply更好.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a href="#" data-toggle="collapse" data-target="#improvementsPanel" aria-expanded="true" class="">Improvements</a>
        </div>
        <table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
            <thead>
                <tr>
                    <th>Description</th>
                    <th class="text-right">Qty</th>
                    <th>UOM</th>
                    <th class="text-right">Rate</th>
                    <th class="text-right">Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Item 1</td>
                    <td class="text-right">133.00</td>
                    <td>m²</td>
                    <td class="text-right">425.00</td>
                    <td class="text-right">56,525</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td class="text-right">85.00</td>
                    <td>m²</td>
                    <td class="text-right">70.00</td>
                    <td class="text-right">5,950</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                    <td class="text-right">25.00</td>
                    <td>m²</td>
                    <td class="text-right">100.00</td>
                    <td class="text-right">2,500</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                    <td class="text-right"></td>
                    <td></td>
                    <td class="text-right"></td>
                    <td class="text-right">1,500</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th class="text-right" colspan="4">Total</th>
                    <th class="text-right">66,475</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

Answer 1

该collapse级切换上的表的显示样式none和block,这似乎与标准表CSS来干扰.

您可以通过将表放在div中并将该div设置为折叠而不是表来解决此问题.

新Bootply:http://www.bootply.com/L8h2OdpMuD

HTML:

<div style="margin: 15px">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a href="#" data-toggle="collapse" data-target="#improvementsPanel" aria-expanded="true" class="">Improvements</a>
        </div>
        <div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
            <table class="table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th class="text-right">Qty</th>
                        <th>UOM</th>
                        <th class="text-right">Rate</th>
                        <th class="text-right">Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Item 1</td>
                        <td class="text-right">133.00</td>
                        <td>m²</td>
                        <td class="text-right">425.00</td>
                        <td class="text-right">56,525</td>
                    </tr>
                    <tr>
                        <td>Item 2</td>
                        <td class="text-right">85.00</td>
                        <td>m²</td>
                        <td class="text-right">70.00</td>
                        <td class="text-right">5,950</td>
                    </tr>
                    <tr>
                        <td>Item 3</td>
                        <td class="text-right">25.00</td>
                        <td>m²</td>
                        <td class="text-right">100.00</td>
                        <td class="text-right">2,500</td>
                    </tr>
                    <tr>
                        <td>Item 4</td>
                        <td class="text-right"></td>
                        <td></td>
                        <td class="text-right"></td>
                        <td class="text-right">1,500</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th class="text-right" colspan="4">Total</th>
                        <th class="text-right">66,475</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

Answer 2

或者,您可以添加css:

table.collapse.in {
   display: table;
}

可以说这可能是组件动画的补丁.无.