Question

我正试图为移动设备提供HTML / CSS布局。（它可能是一个单独的网站，仅适用于移动设备，但我可以使用响应式网站为这两个网站逃脱。）

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

问题是，当我在Android设备（LG G2）上加载此页面时，页面比我的显示屏略宽。所以我只能通过水平滚动来查看页面的右侧。

我尝试将所有容器引用改为使用 container-fluid ，但没有区别。

有谁知道如何让这个页面适合我的设备？

更新

史蒂文波浪一直很有帮助。他建议一些CSS允许自动换行。但是A）桌子仍然不适合我的LG G2（1080 x 1920显示器），而B）为什么地球上的Bootstrap首先阻止了自动换行？ Isn的Bootstrap响应是否适用于手机？

Answer 1

好的，这是我最后的建议：）

再次否决默认的引导程序属性，如：

@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;
   }
}

您将能够实现目标。但我认为这是一个令人困惑的表，它不是很可读。因为这个bootstrap决定使用水平滚动行为。只是为了可读性。

更新缩放：有几种方法可以缩放＆＃34;。

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

在这种情况下，它完全是关于空间的，所以我减少了.container属性以获得更多空间。

现在，您可以将网站的大小调整为290px（这绝对是可以的 - 现在大多数移动设备已被覆盖）并且桌子适合使用。

275px !!

enter image description here

第二张桌子的表格标题非常接近，但我认为它也可以。

290px !!

enter image description here

好的，知道字体大小很小，但也有可能通过智能手机扩展内容。

希望这会有所帮助！

Answer 2

问题出在你的桌子上！您可以通过将table-responsive属性添加到“＆＃39;容器”来解决此问题。 div包括两个表!!

更新：

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

更好的方法是只包装表而不是空洞内容！

查看bootsrap DOCUMENTATION

更新：

这是最终的bootstrap特定解决方案：

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

这将避免第二个表的空白空间。通常，只要td内容不填充空间，引导响应表就是流动的。当内容较长时，会出现桌子的水平滚动。这是典型的行为！

如果你真的想要，那么你应该采取更进一步的方式！ Thera有许多不同的解决方案，用于响应表格，如THIS

也许你找到一个符合你需求的产品！

Answer 3

将引导属性从white-space: nowrap;重写为normal：

@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 {
    white-space: normal;
}

因此表格适合430px。对于所有较小的设备，滚动显示。

Answer 4

用于定位示例：

<div class="col-sm-12">
<div class="col-sm-6">
column 1 
</div>
<div class="col-sm-6">
column 2 
</div>
</div>

可以将此用于tr和td

Answer 5

以下是将N列表更改为width小于1000px的屏幕的属性列表的解决方案：

<style>
    @media only screen and (max-width: 1000px) {
        #userManageTable {
            margin-top: 16px;
        }

        #userManageTable, #userManageTable thead, #userManageTable tbody, 
        #userManageTable th, #userManageTable td, #userManageTable tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */

        #userManageTable thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        #userManageTable tbody tr {
            border: 1px solid #ccc;
        }

        #userManageTable tbody td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
            height: 49px;
            width: 100%;
        }

        #userManageTable tfoot {
            width: 100%;
        }

        #userManageTable tfoot td {
            /* Behave  like a "row" */
            border: none;
            position: relative;
            height: 49px;
            width: 100%;
        }

        #userManageTable tbody td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
        Label the data
        */

        #userManageTable tbody td:nth-of-type(1):before {
            content: "Imię";
        }

        #userManageTable tbody td:nth-of-type(2):before {
            content: "Nazwisko";
        }

        #userManageTable tbody td:nth-of-type(3):before {
            content: "Login";
        }

        #userManageTable tbody td:nth-of-type(4):before {
            content: "Aktywność";
        }

        #userManageTable tbody td:nth-of-type(5):before {
            content: "";
        }

        #userManageTable tbody td:nth-of-type(6):before {
            content: "";
        }

        #userManageTable tbody td:nth-of-type(7):before {
            content: "";
        }

        #userManageTable tbody td:nth-of-type(8):before {
            content: "";
        }

        #userManageTable tbody td:nth-of-type(9):before {
            content: "";
        }

        #userManageTable tbody td:nth-of-type(10):before {
            content: "";
        }
    }
</style>

它适用于默认的Bootstrap v.3 CSS。只需给它id = "userManageTable"。

智能手机上的Bootstrap布局太宽

5 个答案: