Как я могу увидеть эффект V-строки с помощью V-карты? - PullRequest
Новая
       8

Как я могу увидеть эффект V-строки с помощью V-карты?

0 голосов
/ 26 октября 2019

Я хочу сделать 2x2 v-card объект. usign vuetify 

<v-row>
    <v-col>
      <v-btn width="100">asfd</v-btn>
      <v-btn width="100">adsf</v-btn>
    </v-col>
    <v-col>
      <v-card width="100">adsf</v-card>
      <v-card width="100">asdf</v-card>
    </v-col>
  </v-row>

Если a v-btn in v-col , это работает хорошо, но если я изменяю v-btn на v-card , тогда свойство v-row игнорируется. Помогите мне, пожалуйста.

1 Ответ

0 голосов
/ 27 октября 2019

Это не относится к vue, но html.

v-btn разрешится в кнопке html со свойством display, установленным на inline-block, которое поместит элементы в одну строку. v-card разрешится в html div, у которого свойство display установлено в block, что позволит расположить элементы друг под другом.

Для правильного позиционирования элемента посмотрите на https://vuetifyjs.com/en/styles/flex

<div id="app" >
  <v-app class="d-flex pa2">
    <v-row justify="space-around" align-items="align-stretch">
      <v-card width="50%">adsf</v-card>
      <v-card width="50%">bcde</v-card>
    </v-row>
    <v-row justify="space-around" align-items="align-stretch">
      <v-card width="50%">adsf</v-card>
      <v-card width="50%">bcde</v-card>
    </v-row
  </v-app>
 </div>
...