twitter-bootstrap 使用 Bootstrap 用 div/table 填充整个屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25391780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fill entire screen with a div/table with Bootstrap
提问by vico
I have a table written in HTML that I'm trying to get to display nicely on a mobile device.
我有一个用 HTML 编写的表格，我试图在移动设备上很好地显示它。
The table is 100% composed of images, because it's really easy to position images if they're in a table(it's a puzzle, so positioning was a pain).
桌子是 100% 由图像组成的，因为如果它们在桌子中，定位图像真的很容易（这是一个难题，所以定位很痛苦）。
Now, before I get a few people suggesting that I should just scrap the table and use a different method of formatting these pictures - thanks, but I'd really like to get this working before I re-write it completely. I completely appreciate the suggestion, and I definitely will get around to changing it, but for now I just need to get this specific method functional.
现在，在我得到一些人建议我应该废弃表格并使用不同的方法来格式化这些图片之前 - 谢谢，但我真的很想在我完全重写它之前让它工作。我完全感谢这个建议，我肯定会改变它，但现在我只需要让这个特定的方法起作用。
So basically, the table(looking like a complete image) always places itself at the upper right corner of the mobile page - here's a screenshot(cropped the URL out) http://imgur.com/r0ow5mc
所以基本上，表格（看起来像一个完整的图像）总是将自己放在移动页面的右上角 - 这是一个截图（裁剪出 URL）http://imgur.com/r0ow5mc
I'm using CSS classes to position the rows and columns, but even changing these up doesn't change anything.
我使用 CSS 类来定位行和列，但即使更改这些也不会改变任何内容。
Here's the code(starting at the <meta>tags, ending at the </div>tags) -
这是代码（从<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>
I'd appreciate any suggestions, I'm really confused as to why this just won't fill my screen.
我很感激任何建议，我真的很困惑为什么这不会填满我的屏幕。
Thanks in advance,
提前致谢，
-M
-M
回答by vico
read bootstrap doc
阅读引导程序文档
Example: Fluid container
示例：流体容器
Turn any fixed-width grid layout into a full-width layout by changing your outermost .containerto .container-fluid.
通过将最外层更改.container为.container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
http://getbootstrap.com/css/#grid
http://getbootstrap.com/css/#grid
also mobile and table doesn't go hand in hand with eachother...
手机和桌子也不是齐头并进的……
回答by Kauthon
Here's a responsive table I found. It should do the trick. http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table
这是我找到的响应表。它应该可以解决问题。 http://bootsnipp.com/snippets/featured/no-more-tables-repsonsive-table
