2 html css mobile twitter-bootstrap
我有一个用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
阅读bootstrap doc
打开任何固定宽度的网格布局成一个全宽度的布局,通过改变你的最外层.container,以.container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
http://getbootstrap.com/css/#grid
移动和桌子也不是彼此相辅相成的......