Bootstrap 折叠调整大小 table

Question

    <div class="row">
        <div class="col-md-8"> 
            <h3 data-toggle="collapse" data-target="#collapseList" aria-expanded="false" aria-controls="collapseList"> 1 Lecturer List</h3>
            <table class="table table-bordered collapse" id="collapseList">
            <thead>
                <tr>
                    <th>List Id</th>
                    <th>List Name</th>
                    <th>Total Subscribers</th>
                    <th>Action</th>
                    <th>Problems</th>
                </tr>
            </thead>
            <tr>
                <td>a</td>
                <td>abcdefg</td>
                <td>a</td>
                <td>Synchronize</td>
                <td>NOK</td>
            </tr>
            </table>
        </div>
    </div>

这是我点击 header 标签时的结果，它出现 1 秒 :

1 秒后，这就是我所拥有的：

为什么我的 table 折叠后大小变了？有没有办法不调整 table 的大小？

更新：

这里有一个JSfiddle，你自己试试看有没有问题https://jsfiddle.net/0zw5a845/

Answer 1

可能是因为您的 div 的 class 为 col-md-8。

如果您想要 table 横跨整个页面宽度，请将 class 更改为 col-md-12。

Answer 2

将以下 CSS 行添加到您的主要样式 sheet。这实质上覆盖了 bootstrap 样式 sheet 的 .collapse.in 选择器。

.collapse.in {display:table}

Updated JSFiddle

Bootstrap 折叠调整大小 table

Bootstrap collapse resize table

html

css

collapse

twitter-bootstrap