web-dev-qa-db-ja.com

vuetifyを使用したレスポンシブレイアウト

私は各行に4つのdivがあるレイアウトを持っています、今モバイルで私は画像のように2つのdivに4つのdivを変更したいと思います

enter image description here

これが私のコードです

<v-layout wrap align-center>
    <v-flex
        v-for="n in 10  "
           :key="n"
           xs3
           >
           <p>testtttt</p>
     </v-flex>
</v-layout>

Vuetifyの例 https://codepen.io/thanhtungvo/pen/Padagq?&editors=1 現在3つの画像があり、2つの画像を変更してモバイルバージョンで最大幅を維持する方法（レスポンシブ）ありがとう

vue.jsvuetify.js
3
Vo Thanh Tung

vuetifyに感謝します、それはそのように修正することができます

<v-flex
  v-for="i in 4 "
    :key="i"
     xs6
     md3
>

xs6：小さな画面用
md3：中画面用
他のメトリックでドキュメントをチェックできます https://vuetifyjs.com/en/layout/display

8
Vo Thanh Tung
<v-flex v-for="i in 6" :key="i" xs6>
1
Rafael Lucini