twitter-bootstrap - 表的 Bootstrap3 响应性不起作用

Question

<div class="table-responsive">
<table class="table">
...
</table>
</div>

此代码块不会在 Bootstrap 中生成响应表。请帮助我使用 Bootstrap 实现响应式表。
提前致谢

Answer 1

以下响应表仅适用 <768px .

<div class="table-responsive">
    <table class="table">
    </table>
</div>

因为 bootstrap 3有以下代码

@media (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #DDD;
        -webkit-overflow-scrolling: touch;
    }
}

如果您想要显示的响应表 >768px , 然后你可以像这样在没有媒体查询的情况下在你的 css 中覆盖它

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
    -webkit-overflow-scrolling: touch;
}