Question

我想要做的是为某些屏幕尺寸指定某些图像尺寸。是否存在仅在某些屏幕尺寸上变为活动状态的引导类？这将是最佳的。这样我可以做<img class = "only-active-on-mobile" src="myimage.jpg">这样的事情吗？

到目前为止我的代码是：

   <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object img-rounded" style="" src="<%= image_path('MY_IMG_THAT_NEEDS_RESIZING.jpg') %>">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        <!-- Nested media object -->
        <div class="media">
          ...
        </div>
      </div>

Answer 1

Bootstrap提供了一组用于此目的的“实用程序”类.visible-和.hidden-。

要根据设备宽度隐藏/显示内容，请添加以下内容：

xs适用于超小型设备（手机<768px）

sm适用于小型设备（平板电脑≥768px）

md适用于中型设备（桌面≥992px）

lg适用于大型设备（桌面≥1200px）

所有这些都可以在 the docs

中找到

在您的情况下，为移动图片添加课程.visible-xs，为替换版本添加.hidden-xs。

Bootstrap：响应缩放图像

1 个答案: