Bootstrap 4 页面在某些移动分辨率下无法正确显示答案

【问题标题】：Bootstrap 4 page does not display properly in some mobile resolutionsBootstrap 4 页面在某些移动分辨率下无法正确显示
【发布时间】：2017-03-15 18:47:07
【问题描述】：

我基于 Bootstrap 4 示例构建了一个网页。

当尝试以负责任的设计模式显示时：Firefox 的 980 x 1280 都可以正常显示。

但实际上在生产模式下，当我从 Galaxy Tab 2 浏览页面时，我得到侧链接（蓝色）与主要内容重叠，尤其是一些“OK！”按钮。

请在此处查看结果：http://s529471052.onlinehome.fr/1.2/sensors/capture.png

源代码在这里：http://s529471052.onlinehome.fr/1.2/sensors/sensors14.html

请告诉我如何解决这个问题？

【问题讨论】：

@TariqJaved 提供了正确答案。另请记住，Bootstrap 4 仍处于 alpha 阶段，因此您可能会遇到一些不一致的情况。

标签： android jquery html twitter-bootstrap responsive-design

【解决方案1】：

用 class="table-responsive" 包裹表格

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

【讨论】：

当添加
我确实不再获得与主要内容重叠的侧链接，但所有“OK！”按钮已被删除：s529471052.onlinehome.fr/1.2/sensors/sensors15.html（在 980x1280 分辨率下可见问题）
您希望发生什么？表格的内容对于较小的宽度来说太宽了。
表格是响应式的并且可以水平滚动

【解决方案2】：

您没有正确设置网格系统。 Refer this

<div class="row">
  <div class="col-8">For Sensor Manager section in your case </div>
  <div class="col-4">For the right side menu should help you</div>
</div>

【讨论】：

【解决方案3】：

在table的父div中简单快速地设置overflow:scroll样式如下图

<div style="overflow:scroll">
    <table>
    .
    .
    .
    .
    </table>
</div>

使用溢出属性创建“css 类”并在媒体查询中处理它的最佳方式。

【讨论】：