Question

我注意到bootstrap预构建的类“表响应”效果很好。它在移动视图中向侧面提供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>

如果是个bug，任何人都知道如何解决这个问题吗？

Answer 1

感谢Michael，这个问题的答案是：
只需放一个显示：块;在你的#vitals元素上。 jsfiddle.net/shfcmkhv/2 - 迈克尔

引导内容离开响应表

1 个答案: