Question

几个小时前，我从Bootstrap 3.0.3升级到3.1.1，我的所有表都突然水平折叠到最小宽度。今天早些时候，这个表显示得很好，占据了.container对象的整个宽度

<div class="table-responsive">
    <table class="table table-striped table-condensed" id="intakes_header">
        <caption class="h2">Annual Intakes [1]</caption>
        <thead style="height: auto;" id="intakes_head" class="intakes_targets in">
            <tr>
                <th>School Year</th>
                <th>Referred By</th>
                <th>Exit Date</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody style="height: auto;" id="intakes_body" class="intakes_targets col-sm-12 in">
            <tr>
                <td>2013-14</td>
                <td>SAFE House</td>
                <td>-</td>
                <td><a href="https://localhost/EPHY/index.php/familyschoolyear/3827/edit" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></a></td>
            </tr>
        </tbody>
    </table>
</div>

现在<caption>运行整个宽度，但列是显示内容所需的最小尺寸，标题甚至不与其下方的列内容对齐。真正奇怪的部分是我一直在尝试添加col-md-X类，如果我添加一个加起来为12的集合，则列正常显示，但是否则它们仍然被压扁，即。

<tr>
    <th class='col-sm-3'>School Year</th>
    <th class='col-sm-3'>Referred By</th>
    <th class='col-sm-3'>Exit Date</th>
    <th class='col-sm-2'>&nbsp;</th>
</tr>

显示为像没有类一样挤压在一起但是

<tr>
    <th class='col-sm-3'>School Year</th>
    <th class='col-sm-3'>Referred By</th>
    <th class='col-sm-3'>Exit Date</th>
    <th class='col-sm-3'>&nbsp;</th>
</tr>

毫不费力地将它们展开。这影响了自升级以来我在应用程序中看到的每个表。

显然我应该能够通过手动添加列类来扩展表格，但这也会将我锁定为固定的宽度比例，这并不总是合适的，这取决于返回填充表格的记录。我只想弄清楚这里发生了什么（显然）打破了桌子。有关检查内容的任何建议吗？

Answer 1

从tbody中删除类“col-sm-12”以使其成为表格。

Answer 2

我一直在用火焰喷射器追踪我的代码，似乎正在缩小范围。我得出的结论是，问题与升级Bootstrap无关，暂时不说;显示问题出现在我正在使用Collapse组件的区域，该组件在周五工作正常，但是当我切除它们时，显示器恢复正常。如果我能弄清楚发生了什么，我会报告回来。

更新到3.1.1后，其他任何人都遇到Bootstrap表问题吗？

2 个答案: