【问题标题】：Fill entire screen with a div/table with Bootstrap使用 Bootstrap 用 div/table 填充整个屏幕
【发布时间】：2014-08-19 19:45:40
【问题描述】：

我有一个用 HTML 编写的表格，我正试图在移动设备上很好地显示它。

表格 100% 由图像组成，因为如果图像在表格中，定位图像真的很容易（这是一个难题，所以定位很痛苦）。

现在，在我得到一些人建议我应该废弃表格并使用不同的方法来格式化这些图片之前 - 谢谢，但我真的很想在我完全重写之前让它工作。我非常感谢这个建议，我肯定会改变它，但现在我只需要让这个特定的方法起作用。

所以基本上，表格（看起来像一个完整的图像）总是将自己放在移动页面的右上角 - 这是一个屏幕截图（截取 URL）http://imgur.com/r0ow5mc

我使用 CSS 类来定位行和列，但即使更改它们也不会改变任何东西。

这是代码（从<meta> 标签开始，到</div> 标签结束）-

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>!!!!!</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
<div class="table-responsive">
            <table width="100%" id="table" border="0" cellpadding="0" cellspacing="5" align="center">
                <tr>
                    <td id="one">
                        <img src="1.png" class="merge0">
                    </td>
                    <td id="two">
                        <img id="2" src="6.png" class="merge">
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td id="three">
                        <img src="4.png" class="row1">
                    </td>
                    <td id="four">
                        <img src="2.png" class="merge1">
                    </td>
                    <td id="five">
                        <img src="7.png" class="merge2">
                    </td>
                </tr>
                <tr>
                    <td id="six">
                        <img src="8.png" class="row2">
                    </td>
                    <td id="seven">
                        <img src="5.png" class="row3">
                    </td>
                    <td id="eight">
                        <img src="3.png" class="row4">
                    </td>
                </tr>
            </table>
        </div>

我很感激任何建议，我真的很困惑为什么这不会填满我的屏幕。

提前致谢，

-M

【问题讨论】：

如果你可以在 bootply 中重现这个问题；我很乐意提供帮助
从未使用过 bootply，但我会继续使用它。如果我给你我正在尝试工作的网站的 URL 会有帮助吗？另外，请务必注意在桌面上，网页显示完美。
您的图片不够宽，您还需要缩放它们以适应所有屏幕宽度。您的布局根本不是引导程序，并且您将表类应用于错误的元素。等等等等..
bootply.com/new# - 你也可以提供网站。我猜这是你的容器。

标签： html css twitter-bootstrap mobile

【解决方案1】：

阅读引导文档

示例：流体容器

通过将最外层的.container 更改为.container-fluid.，将任何固定宽度的网格布局转换为全宽度布局

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

http://getbootstrap.com/css/#grid

手机和桌子也不能并驾齐驱……

【讨论】：

这是我的猜测；但我还没有测试过。

【解决方案2】：

这是我找到的响应式表格。它应该可以解决问题。 http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

【讨论】：