如何水平放置等宽的组件？答案

【问题标题】：How to fit components with equal width horizontally?如何水平放置等宽的组件？
【发布时间】：2020-03-23 00:22:39
【问题描述】：

我有两个单选按钮。在第二个单选按钮上，我想放置 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>

结果：

【问题讨论】：

标签： javascript vue.js vuetify.js grid-system

【解决方案1】：

如果我正确理解您的问题，您希望“Outro Mes”单选按钮、“Mes”选择器和“Ano”选择器都在同一行中。

您的代码现在正在为 vuetify 网格系统中大于“sm”的窗口大小执行此操作。当我在我的机器上运行它时，我得到了这个：

Window size larger than "sm"

Window size "sm"

如果您想让单选按钮始终与选择项位于同一行，即使窗口大小为“sm”，您只需将每列更改为 [cols="4"]。

如果我没有正确理解您的问题，请留下评论并加以澄清。

【讨论】：