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

发布时间：2020-12-18 00:15:17 所属栏目：安全来源：网络整理

导读：div class="table-responsive"table class="table".../table/div 此代码块不会导致Bootstrap中的响应表。请帮助我使用引导来实现响应表。提前致谢解决方法以下响应表仅适用于 768px。 div class="table-responsive" table class="table" /table/div 因为

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

此代码块不会导致Bootstrap中的响应表。请帮助我使用引导来实现响应表。
提前致谢

解决方法

以下响应表仅适用于< 768px。

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

因为引导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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!