引导内容离开响应表答案

【问题标题】：bootstrap content leaving responsive table引导内容离开响应表
【发布时间】：2015-10-30 12:37:15
【问题描述】：

我注意到引导预构建类“表响应”效果很好。它在移动视图中和用于维护视口时向侧面提供 table/div 滚动条。

但我也注意到内容超出了包含 div 并进入主背景 div。

我在下面提供了一张图片，（抱歉，我切断了水平滚动条）但是您可以看到白色容器内容已超出并进入较深的灰色/蓝色。

这是一个表格示例（引导类）

<div class="row">
<div class="col-lg-6">
    <div class="panel panel-primary">
        <div class="panel-heading">System Vitals</div>
        <div class="panel-body">
            <table id="vitals" class="table table-hover table-responsive">
                <tr>
                    <th>Hostname</th>
                    <td><span data-bind="Hostname"></span></td>
                </tr>
                <tr>
                    <th>Listening IP</th>
                    <td><span data-bind="IPAddr"></span></td>
                </tr>
                <tr>
                    <th>Kernel Version</th>
                    <td><span data-bind="Kernel"></span></td>
                </tr>
                <tr>
                    <th>Distro Name</th>
                    <td><span data-bind="Distro"></span></td>
                </tr>
                <tr>
                    <th>Uptime</th>
                    <td><span data-bind="Uptime"></span></td>
                </tr>
                <tr>
                    <th>Last boot</th>
                    <td><span data-bind="LastBoot"></span></td>
                </tr>
                <tr>
                    <th>Current Users</th>
                    <td><span data-bind="Users"></span></td>
                </tr>
                <tr>
                    <th>Load Averages</th>
                    <td><span data-bind="LoadAvg"></span></td>
                </tr>
                <tr id="tr_SysLang">
                    <th>System Language</th>
                    <td><span data-bind="SysLang"></span></td>
                </tr>
                <tr id="tr_CodePage">
                    <th>Code Page</th>
                    <td><span data-bind="CodePage"></span></td>
                </tr>
                <tr id="tr_Processes">
                    <th>Processes</th>
                    <td><span data-bind="Processes"></span></td>
                </tr>
            </table>
        </div>
    </div>
</div>

如果这是一个错误，有人知道如何解决这个问题吗？

【问题讨论】：

我已将您提供的表格放入 JSFiddle (jsfiddle.net/shfcmkhv)，但您提供给我们的表格似乎与您图片中的完全不同。
对不起。表中没有数据，因为我是从数据库中动态提取的，那是原始代码。现在看看你的jsfiddle。如果您将浏览器缩小到像手机一样的小尺寸，并水平使用滚动条，您将看到表列“侦听 IP”，其中包含随机乱码。/
只需将display: block; 放在您的#vitals 元素上。 jsfiddle.net/shfcmkhv/2
哇.....这很容易。非常感谢迈克尔！如果您将其发布为答案，我会接受它

标签： html

【解决方案1】：

感谢迈克尔，这个问题的答案是：
只需放一个 display: block;在你的#vitals 元素上。 jsfiddle.net/shfcmkhv/2 – 迈克尔

【讨论】：