Question

我有一组图片，我将动态传递这些图片。对于中型以上的设备，我希望它们显示在同一行中，但是对于小型设备，我希望它们显示在一列中，并在它们之间留有间隔

我尝试将<v-layout row>和<v-layout column>的各种组合与多个flex元素一起使用，但无法达到预期的效果。主要引用：https://vuetifyjs.com/en/framework/grid

以下是我目前的实现方式：

<v-container fill-height>
          <nav-bar></nav-bar>
          <v-content>
            <search-bar></search-bar>
              <v-layout row wrap>
              <v-flex d-flex xs-12 offset-xs2 md-3 offset-md2>
                <v-img max-height="200px" max-width="200px" src="https://i.scdn.co/image/f4cf63b3a163cea8d93ac5d047bbb5dc96b06ed4"> </v-img>
              </v-flex>
              <v-flex d-flex xs-12 md-3 offset-md1>
                <v-img max-height="200px" max-width="200px" src="https://i.scdn.co/image/f4cf63b3a163cea8d93ac5d047bbb5dc96b06ed4"> </v-img>
              </v-flex>
              <v-flex d-flex xs-12 md-3 offset-md1>
                <v-img max-height="200px" max-width="200px" src="https://i.scdn.co/image/f4cf63b3a163cea8d93ac5d047bbb5dc96b06ed4"> </v-img>
              </v-flex>
              <v-layout>
          </v-content>
</v-container>

例如：

MD: XXX
XS: X
    X
    X

将元素的行缩小为屏幕大小的一列

0 个答案: