Bootstrap 根据视口大小调整表格上的图像大小

Question

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

由于论坛规定，我还不能附上图片，所以如果你可以用 iPhone 4/5 浏览到web app 并搜索“Patron”，你会看到产品图片非常小，不是确定为什么？

此外，在较小的视口尺寸上，徽标标题位于第二行，您能否告知根据视口尺寸调整徽标标题的最佳方法是什么？

Answer 1

我可以看到您已将 Bootstrap 类添加到 <td> 元素以尝试控制宽度。我注意到在您的 HTML 中包含“。”在课堂上。您无需在 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;
    }
}