Question

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

尝试在负责任的设计模式下显示时：来自Firefox的980 x 1280正常显示。

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

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

可在此处获取来源：http://s529471052.onlinehome.fr/1.2/sensors/sensors14.html

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

Answer 1

用class =＆＃34; table-responsive＆＃34;

包装表格

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

Answer 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>

Answer 3

在表格的父div中简单快速设置溢出：滚动样式如下所示

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

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

在某些移动分辨率下，Bootstrap 4页面无法正常显示

3 个答案: