twitter-bootstrap – 表格宽度超过智能手机的屏幕宽度

发布时间：2020-12-17 21:28:11 所属栏目：安全来源：网络整理

导读：我已经阅读了与表宽相关的问题并做了一些事情. “自动换行：打破字;”在bootply(桌面,移动)/ chrome(桌面)/ IE(桌面)中运行良好. 但超过firefox(桌面/ xs宽度)chrome(移动)android浏览器(Jelly Bean)中的屏幕宽度在sm / md / lg网格表中有很多列. 在xs网格

我已经阅读了与表宽相关的问题并做了一些事情.

“自动换行：打破字;”在bootply(桌面,移动)/ chrome(桌面)/ IE(桌面)中运行良好.
但超过firefox(桌面/ xs宽度)chrome(移动)android浏览器(Jelly Bean)中的屏幕宽度

在sm / md / lg网格表中有很多列.
在xs网格表中只显示1列并隐藏其他列.

测试样本代码(http://bootply.com/102163)

<table width="100%" class="table table-condensed table-hover" style="word-wrap: break-word;">
  <tbody><tr><td>
    long width table ...  ????? ??? resize javascript? ??? ??? ????? ... some
    long width table ...  ????? ??? resize javascript? ??? ??? ????? ... some
    long width table ...  ????? ??? resize javascript? ??? ??? ????? ... some
  </td></tr>
</tbody></table>

在Jelly Bean网络浏览器上捕获的红色框.
reb box http://opencode.co.kr/data/file/css/1312/1387805255_iEUtCjcK_table_overflow.png

解决方法

使用表响应类.

请尝试以下方法：

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

（编辑：李大同）

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