Bootstrap根据视口大小调整表格大小

Question

我开发了一个使用Bootstrap v3.3.5查找产品的网站，请参阅web app @ www.montgomerycountymd.gov/dlcsearch，但我需要帮助才能在较小的视口大小（如iPhone 4/5）上正确显示产品项目。

由于论坛规定，我无法附加图片，因此，如果您可以从iPhone 4/5浏览到web app并搜索“Patron”，您会看到产品图片非常小，不知道为什么？

此外，在较小的视口大小上，徽标标题会转到第二行，您能否根据视口大小建议调整徽标标题大小的最佳方法是什么？

Answer 1

我可以看到你已经为<td>元素添加了Bootstrap类来尝试控制宽度。我注意到在你的HTML中你包含了＃34;。＆＃34;在课堂上。您不需要在HTML中执行此操作。

示例：

<td class=".col-xs-3">

应该是：

<td class="col-xs-3">

如果我正确理解你的场景，那么我的建议是添加2个类来控制列的宽度。一类用于超小屏幕（手机），另一类用于小屏幕（平板电脑）或更大屏幕。

这样的事情：

<tr>
    <td class="col-xs-5 col-sm-2"><!--your image will go here--></td>
    <td class="col-xs-4 col-sm-7"><!--your description will go here--></td>
    <td class="col-xs-3 col-sm-4 text-center"><!--your price will go here--></td>
</tr>

我还会使用媒体查询来使描述文本对于超小屏幕来说更小一些。

示例：

@media (max-width: 767px) {
    #grdResults_ctl03_lblDescription{
        font-size:1em;
    }
}