表在引导程序中没有响应

Question

我有生成表格的代码：

<table class="table table-hover">
    <thead>
        <tr>
            <th class="col-xs-3">Friendly Name</th>
            <th class="col-xs-3">Unique Tracker URL</th>
            <th class="col-xs-3">URL Endpoint</th>
            <th class="col-xs-1">Bitly Link</th>
            <th class="col-xs-1">Info and Settings</th>
            <th class="col-xs-1">Danger Zone</th>
        </tr>
    </thead>
    <tbody id="linksBody">
        <tr id="links">
            <td>(<a onclick="edit(this)">Edit</a>) <?php echo $row['friendly']; ?></td>
            <td>(<a onclick="editEnd(this)">Customize</a>) <a href="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></a></td>
            <td><a href="<?php echo $row['endpoint']; ?>"><?php echo $row['endpoint']; ?></a></td>
            <td><a href="<?php echo $row['bitly']; ?>"><?php echo $row['bitly']; ?></a></td>
            <td><a onclick="showDetails(this);">Show</a>/<a onclick="settings(this);">Settings</a></td>
            <td><a onclick="del(this);">Delete</a>/<a onclick="reset(this);">Reset</a></td>
        </tr>
    </tbody>
</table>

它可以很好地扩展到大约1275px宽，如下所示：

但是，当屏幕尺寸低于该尺寸时，它会开始破坏：

我可以做些什么来让我的桌子响应？

Answer 1

Bootstrap有一个类：.table-responsive。 您可以阅读有关他here的全部内容。

使用此类将代码包装在div中。例如：

<div class="table-responsive">
    <table class="table table-hover">
        [...]
    </table>
</div>

我希望这会对你有所帮助！