表的引导程序 3 响应不起作用

Question

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

此代码块不会导致引导程序中出现响应式表。请帮助我使用引导程序实现响应式表。提前致谢

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;
}

Answer 2

我知道文档是这么说的，我已经问过.table-response在表格上方的div中不起作用，但将其添加到表格类中有效...执行以下操作，您的问题应该得到解决。

不工作：

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

工程：

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

演示

Answer 3

我不明白为什么以下内容不起作用......确保您没有设置宽度或高度...发布完整的 HTML。

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

[引导程序3]

Answer 4

Fizer Khan在此页面上的回答是正确的。只是为了补充它，以便您仅在绝对想要它在设备>768px中时才应用它，我建议您在自己的CSS文件中创建自定义CSS样式，如下所示：

.table-responsive-force {
    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;
}

然后，只要您想要实际覆盖 Bootstrap 的默认行为，您就可以使用它。

Answer 5

您可能没有将宽度设置为外部(包装(div(或部分(。将"宽度：100%"添加到外部元素可能会解决问题。