屏幕宽度小于960px时按钮图片消失问题求助

问题根源 #

你代码里用的hidden-sm-and-down是Vuetify的响应式隐藏类，它的作用是在屏幕宽度小于960px（sm断点及以下）时隐藏包裹的元素，这就是小屏状态下按钮图片消失的直接原因。

解决方案 #

根据你的显示需求调整隐藏类即可：

1. 若想让图片在所有屏幕尺寸下都显示，直接删除hidden-sm-and-down类：

<v-container fluid>
    <v-row>
      <v-col cols="12" sm="6" xs="6" class="py-2">
        <v-btn-toggle borderless>
          <v-btn value="left">
            <span><img src="/storage/img/btn-lang/en.png" style="width: 40px" /></span>
          </v-btn>
          <v-btn value="center">
            <span><img src="/storage/img/btn-lang/pt.png" style="width: 40px" /></span>
          </v-btn>
          <v-btn value="right">
            <span><img src="/storage/img/btn-lang/es.png" style="width: 40px" /></span>
          </v-btn>
        </v-btn-toggle>
      </v-col>
    </v-row>
  </v-container>

2. 若需要针对特定断点调整显示逻辑，可替换成其他Vuetify响应式类：
   • hidden-md-and-up：仅在md（≥960px）及更大屏幕隐藏图片
   • hidden-xs-only：仅在xs（<600px）屏幕隐藏图片

补充说明 #

Vuetify响应式隐藏类的通用规则：

• hidden-{breakpoint}-and-up：隐藏该断点及所有更大尺寸的屏幕
• hidden-{breakpoint}-and-down：隐藏该断点及所有更小尺寸的屏幕
• hidden-{breakpoint}-only：仅隐藏该断点对应的屏幕尺寸

内容的提问来源于stack exchange，提问作者outzo