javascript - 指定 vuetify 网格的宽度

问题描述

我有一个带有行和列的 Vuetify 网格，如下所示

使用以下代码制作：

<v-container fluid>
<!-- Top most row -->
<v-row dense>
  <!-- Insert a column for each group -->
  <v-col></v-col>
  <v-col
    cols="auto"
    :style="{ 'text-orientation': 'mixed',
              'writing-mode': 'vertical-rl' }"
    v-for="group in groups"
    :key="group.id"
  >
    <v-card>
      <v-card-subtitle>This is my X axis</v-card-subtitle>
    </v-card>
  </v-col>
</v-row>

<v-row dense v-for="aspect in aspects" :key="aspect.id">
  <v-col>
    <v-card>
      <v-card-text>My Y axis</v-card-text>
    </v-card>
  </v-col>
  <v-col cols="auto" v-for="n in groups.length" :key="n">
    <v-card>
      <v-card-text>hi</v-card-text>
    </v-card>
  </v-col>
</v-row>
</v-container>

我希望从第 2 行开始的第二列与第一行的第二行对齐。实际上，我希望第一行中的第一个列与后面的行中的第一个列具有相同的宽度，也就是这个区域更宽：

我试图通过插入一张卡片来强制第一列的宽度，但以下行的第一列似乎锚定到它们在第一行第三列结束的位置，它最终看起来像这样：

有人可以帮我将第一行中的第二列与以下行中的第二列对齐吗？

标签： javascriptvue.jsvuetify.js

为了使列具有相同的宽度，它们需要具有相同的宽度<v-row>，然后使用全宽 div ( <v-responsive>) 来换行...

    <v-container fluid>
            <v-row dense>
                <v-col cols="1">
                    <v-card class="fill-height">
                        <v-card-text> </v-card-text>
                    </v-card>
                </v-col>
                <v-col cols="auto" :style="{ 'text-orientation': 'mixed',
                          'writing-mode': 'vertical-rl' }" v-for="group in groups" :key="group.id">
                    <v-card>
                        <v-card-text :style="{ 'line-height': .82 }" >This is my X axis</v-card-text>
                    </v-card>
                </v-col>
                <v-responsive width="100%"></v-responsive>
                <template dense v-for="aspect in aspects" :key="aspect.id">
                    <v-col cols="1">
                        <v-card>
                            <v-card-text class="text-truncate">My Y axis</v-card-text>
                        </v-card>
                    </v-col>
                    <v-col cols="auto" grow v-for="n in groups.length" :key="n">
                        <v-card>
                            <v-card-text>hi</v-card-text>
                        </v-card>
                    </v-col>
                    <v-responsive width="100%"></v-responsive>
                </template>
            </v-row>
    </v-container>

注意：我还调整了垂直文本的行高。

https://codeply.com/p/4g1rz1RCQ7

javascript - 指定 vuetify 网格的宽度

问题描述

解决方案

推荐阅读