Bootstrap布局在智能手机上过宽

Jonathan Wood 发表于 Dev

乔纳森·伍德

我正在尝试为移动设备设计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;
   }
}

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

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

CSS 3转换：scale（x，y）
与几个插件来操纵字体大小，例如。
媒体查询

在您的情况下，我决定使用，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;
        }
    }