Bootstrap布局在智能手机上过宽

乔纳森·伍德

我正在尝试为移动设备设计HTML / CSS布局。(这可能是一个仅针对移动设备的单独网站,但我也许能够使用响应式网站来实现这两个目标。)

我正在使用Bootstrap,并找到了我正在实现的布局。您可以在http://softcircuits.com/MediCorp/Menus.htm上看到它

问题是,当我在Android设备(LG G2)上加载此页面时,该页面比我的显示器稍宽。因此,我只能通过水平滚动查看页面的右侧。

我尝试更改所有容器引用以改为使用容器流体,但这没什么区别。

有谁知道我如何使该页面适合我的设备?

更新:

史蒂文·波(Steven Wave)有所帮助。他建议使用一些CSS来实现自动换行。但是A)桌子仍然不适合我的LG G2(1080 x 1920显示屏),B)为什么在地球上首先要由Bootstrap防止自动换行?Bootstrap响应式设计不是可以在手机上工作吗?

史蒂文·韦伯

好的,这是我的最后建议:)

再次否决默认的引导程序属性,例如:

@media screen and (max-width: 767px){
   .table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, 
   .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, 
   .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
        word-break: break-word;
   }
}

您将能够实现自己的目标。但是我认为这是一个令人困惑的表,并且不是很可读。由于这个引导程序决定使用水平滚动行为。仅出于可读性。

更新缩放:有几种“缩放”方法。

  1. CSS 3转换:scale(x,y)
  2. 与几个插件来操纵字体大小,例如。
  3. 媒体查询

在您的情况下,我决定使用,Media Queries因此我使用Developer Tools

首先,我将其添加ÌD's到表格中,这样我就可以轻松地推翻引导程序,而不在乎特异性。

<div class="container table-responsive">
    <p>....</p>
    <table class="table" id="tableA">....</table>
    <table class="table table-striped table-condensed" id="tableB">....</table>
</div>

然后,我为表宽度大于视口的点创建了特定的媒体查询。

    @media (max-width: "500px") {

        #tableB td, #tableB th {
            padding: 5px 2px;
            font-size: 12px;
        }
    }

    @media (max-width: "400px") {            
        .container {
            padding-right: 5px;
            padding-left: 5px;
        }

        #tableB td, #tableB th {
            padding: 5px 2px;
            font-size: 12px;
        }
    }

    @media (max-width: "450px") {
        #tableA td {
            padding: 5px 2px;
            font-size: 12px;
        }
    }

    @media (max-width: "350px") {
        #tableA td {
            padding: 5px 1px;
            font-size: 10px;
        }
    }

在这种情况下,所有内容都与空间有关,因此我也减少了.container属性,并获得了更多空间。

现在,您可以将网站的大小调整为290像素(绝对可以-现在可以覆盖大多数移动设备),表格也可以使用。

275px!

在此处输入图片说明

第二张表的表格标题非常靠近,但我认为也可以。

290像素!

在此处输入图片说明

好的,我知道字体大小很小,但也有可能通过智能手机缩放内容。

希望对您有所帮助!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

android智能手机上的固定宽度html布局

来自分类Dev

HTML和CSS布局在智能手机上无法正确显示

来自分类Dev

如何仅在智能手机上编码Bootstrap手风琴

来自分类Dev

OOP设计与智能手机上的性能

来自分类Dev

在智能手机上运行VBA

来自分类Dev

Github仅在智能手机上页面CSS麻烦

来自分类Dev

防止在智能手机上滚动特定屏幕尺寸

来自分类Dev

除非已缓存,否则SVG图片不会在智能手机上加载

来自分类Dev

如何在智能手机上相邻显示两个div?

来自分类Dev

React网站按钮和输入在智能手机上不起作用

来自分类Dev

为什么程序在特定的智能手机上抛出OutOfMemoryError?

来自分类Dev

使用Three.js对球体进行纹理处理无法在智能手机上使用

来自分类Dev

我在智能手机上没有任何CSS

来自分类Dev

智能手机上的位置服务-它使用哪个物理网络?

来自分类Dev

在智能手机上安装两个操作系统

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

智能手机上的媒体查询网站视图

来自分类Dev

android应用未出现在智能手机上

来自分类Dev

使用相机在Android智能手机上进行心率监测

来自分类Dev

避免在智能手机上自动下载pdf

来自分类Dev

引导A标签在平板电脑和智能手机上不起作用

来自分类Dev

App Android无法在智能手机上打开网页

来自分类Dev

自适应CSS在智能手机上不起作用

来自分类Dev

如何在物理Android智能手机上跟踪运行说明/分支机构?

来自分类Dev

获取1200像素页面以在智能手机上正确显示

来自分类Dev

ScrollView 在 android studio 中工作,但不在我的智能手机上

来自分类Dev

Android Studio:应用程序在我的智能手机上运行后崩溃

来自分类Dev

在智能手机上查看网页时强制元素移动

来自分类Dev

如何获取智能手机上安装的杀毒软件信息?

Related 相关文章

  1. 1

    android智能手机上的固定宽度html布局

  2. 2

    HTML和CSS布局在智能手机上无法正确显示

  3. 3

    如何仅在智能手机上编码Bootstrap手风琴

  4. 4

    OOP设计与智能手机上的性能

  5. 5

    在智能手机上运行VBA

  6. 6

    Github仅在智能手机上页面CSS麻烦

  7. 7

    防止在智能手机上滚动特定屏幕尺寸

  8. 8

    除非已缓存,否则SVG图片不会在智能手机上加载

  9. 9

    如何在智能手机上相邻显示两个div?

  10. 10

    React网站按钮和输入在智能手机上不起作用

  11. 11

    为什么程序在特定的智能手机上抛出OutOfMemoryError?

  12. 12

    使用Three.js对球体进行纹理处理无法在智能手机上使用

  13. 13

    我在智能手机上没有任何CSS

  14. 14

    智能手机上的位置服务-它使用哪个物理网络?

  15. 15

    在智能手机上安装两个操作系统

  16. 16

    返回浏览器时,PHP会话在智能手机上丢失

  17. 17

    智能手机上的媒体查询网站视图

  18. 18

    android应用未出现在智能手机上

  19. 19

    使用相机在Android智能手机上进行心率监测

  20. 20

    避免在智能手机上自动下载pdf

  21. 21

    引导A标签在平板电脑和智能手机上不起作用

  22. 22

    App Android无法在智能手机上打开网页

  23. 23

    自适应CSS在智能手机上不起作用

  24. 24

    如何在物理Android智能手机上跟踪运行说明/分支机构?

  25. 25

    获取1200像素页面以在智能手机上正确显示

  26. 26

    ScrollView 在 android studio 中工作,但不在我的智能手机上

  27. 27

    Android Studio:应用程序在我的智能手机上运行后崩溃

  28. 28

    在智能手机上查看网页时强制元素移动

  29. 29

    如何获取智能手机上安装的杀毒软件信息?

热门标签

归档