Кнопки Vuetify не выровнены по вертикали - PullRequest
Новая
       101

Кнопки Vuetify не выровнены по вертикали

0 голосов
/ 14 июля 2020

Я новичок в Vue и Vuetify. У меня вопрос о выравнивании кнопок. У меня есть контейнер, который содержит пару v-текстовых полей и v-combobox, они центрированы в середине контейнера.

Теперь я хочу иметь три кнопки под этой формой, но что бы я ни пытался если они не выровнены по вертикали, каждая кнопка отображается ниже других. Как я могу исправить это, чтобы они были аккуратно выровнены по верху?

image 

<template>
  <div class="ladder">
    <v-container fluid>
      <v-row justify="center">
        <v-col cols="12" sm="6">
          <v-text-field
            v-model="higher_price"
            :rules="[rules.required, rules.number]"
            label="Higher Price"
          ></v-text-field>
          <v-text-field
            v-model="lower_price"
            :rules="[rules.required, rules.number]"
            label="Lower Price"
          ></v-text-field>
        </v-col>
      </v-row>

      <v-row align="start">
        <v-spacer></v-spacer>
        <v-col align="center" xs="4" >
          <v-btn color="primary"></v-btn>
        </v-col>
        <v-col>
          <v-col align="center" xs="4" >
          <v-btn color="primary"></v-btn>
          </v-col>
        </v-col>
        <v-col>
          <v-col align="center" xs="4" >
          <v-btn color="primary"></v-btn>
          </v-col>
        </v-col>
        <v-spacer></v-spacer>
      </v-row>
    </v-container>
  </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1 Ответ

1 голос
/ 14 июля 2020

Есть два v-col , которые недопустимы в созданном вами шаблоне, их удаление решит вашу проблему .. Попробуйте это .. 

<v-row align="start">
    <v-spacer></v-spacer>
    <v-col align="center" xs="4" >
      <v-btn color="primary"></v-btn>
    </v-col>
    <v-col align="center" xs="4" >
      <v-btn color="primary"></v-btn>
    </v-col>
    <v-col align="center" xs="4">
      <v-btn color="primary"></v-btn>
    </v-col>
    <v-spacer></v-spacer>
  </v-row>
...