1

我正在使用 Twitter 引导程序。我在表格中列出了 3 个元素:

<table>
<tr><td><img /> <span>example</span></td>
<td><img /> <span>example</span></td>
<td><img /> <span>example</span></td></tr>
</table>

当我缩小浏览器窗口时,它的响应效果很好(表格的宽度为 100%)并且缩小了。但是当我把窗口缩小得太小时,它会挤压表格单元格,我宁愿它以一定的宽度垂直堆叠表格单元格。

这可以通过 twitter bootstrap 中的 div 来实现吗?如果是这样,如何。谢谢

4

2 回答 2

1

考虑使用流体或固定网格系统而不是表格。此示例显示的内容与您所说的类似。您上面的代码看起来更像这样:

<div class="row">
    <div class="span4">
        <img/><span>example</span>
    </div>
    <div class="span4">
        <img/><span>example</span>
    </div>
    <div class="span4">
        <img/><span>example</span>
    </div>
</div>

此页面解释了有关网格系统的更多信息。通过包含响应式 CSS 文件,当您的视口缩小到 767 像素以下时,网格中的列将垂直堆叠。

于 2013-06-04T12:45:31.177 回答
0

您应该使用浮动集。这将帮助他们在空间缩小时堆叠起来。此外,您可以设置最小宽度参数,以便它们在限制后不会收缩。

于 2013-06-04T12:36:51.830 回答