Как разместить компоненты с одинаковой шириной по горизонтали? - PullRequest
Новая
       24

Как разместить компоненты с одинаковой шириной по горизонтали?

0 голосов
/ 23 марта 2020

У меня есть две радио кнопки. На втором переключателе я хочу разместить 3 компонента и выровнять ширину по размеру, чтобы соответствовать уникальной линии (ряду). Это переключатель и 2 поля выбора с помощью Vuetify.

В данный момент компоненты находятся в 3 рядах, но я не знаю, как поместить их в уникальный ряд из 3 столбцов. Я следовал за сеткой от Vuetify . 

<v-flex xs12>
  <v-radio-group v-model="paymentType" column>
    <v-radio :label="getCurrentMonthText()"></v-radio>

    <v-container>
      <v-row no-gutters>
        <v-col cols="12" sm="4">
          <v-radio label="Outro mês"></v-radio>
        </v-col>
        <v-col cols="12" sm="4">
          <v-select label="Mês" :items="monthNames" v-model="monthSelected"></v-select>
        </v-col>
        <v-col cols="12" sm="4">
          <v-select label="Ano" :items="years" v-model="yearSelected"></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-radio-group>
</v-flex>

Результат:

Result

1 Ответ

0 голосов
/ 23 марта 2020

Если я правильно понимаю ваш вопрос, вы хотите, чтобы переключатель «Outro Mes», переключатель «Mes» и «Ano» находились в одной строке.

Ваш код выполняет это прямо сейчас для размеров окна больше, чем «см» в системе сетки vuetify. Когда я запускаю его на своем компьютере, я получаю следующее:

Размер окна больше, чем "см"

Размер окна "см"

Если вы хотите, чтобы переключатель всегда находился в той же строке, что и селекты, даже если размер окна равен "sm", вам просто нужно изменить каждый столбец на [cols = "4"].

Если я не правильно понимаю ваш вопрос, пожалуйста, оставьте комментарий с разъяснением.

...