智能手机上的 Bootstrap 布局太宽

Question

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

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

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

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

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

更新：

Steven Wave 很有帮助。他建议使用一些 CSS 来允许自动换行。但是 A）桌子仍然不适合我的 LG G2（1080 x 1920 显示器），以及 B）为什么 Bootstrap 首先阻止了自动换行？ 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;
   }
}

你将能够实现你的目标。 但我认为这是一个令人困惑的表格，而且可读性不强。由于这个引导程序决定使用水平滚动行为。只是为了可读性。

更新缩放： 有几种方法可以“扩展”。

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 像素（完全可以 - 现在涵盖了大多数移动设备）并且表格适合。

275 像素！！

第二个表的表头非常接近，但我认为也可以。

290 像素！！

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

希望这会有所帮助！

Answer 2

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

更新：

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

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

看看bootsrap DOCUMENTATION

更新：

这里是最终的引导程序特定解决方案：

<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的bootsrap属性：

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

所以表格可以缩小到 430 像素。对于所有较小的设备，都会出现滚动。

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 小于 1000 像素的屏幕属性列表的解决方案：

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