css - 在 vuetify 网格中居中 n 数量的 v-col 并增加间距

Question

我正在尝试将nv-cols 的数量与 cols 的左右间距居中，但无法将v-cols与上述对齐的对齐居中v-cols。请注意，响应能力按预期工作，但在最大屏幕尺寸下，我想将其限制为两个v-cols并将其与其他v-row水平长度对齐，同时保持相同的 v-cols 长度。

目前我得到这个：

从

<v-container>
  <v-row dense justify="center">
    <v-col cols="12" md="6" lg="4" xl="3">
      // ...
    </v-col>
  </v-row>

  <v-row dense justify="center">
    <v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
      // ...
    </v-col>
    <v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
      // ...
    </v-col>
  </v-row>

  <v-row dense justify="center">
    <v-col v-for="(item, n) in list" :key="n" cols="12" sm="6" md="6" lg="4" xl="4">
      // ...
    </v-col>
  </v-row>

我要完成的工作如下所示；

可以做些什么来在红色的两侧添加间距以v-cols使它们与上面的其他 v-cols 对齐（在上面的 v-rows 中）？

编辑：现在使用此代码：

<v-container>
<!-- .. other rows -->

<v-row justify="center">
  <v-col cols="24" sm="12" xs="12" md="12" lg="8" xl="6">
    <v-row dense justify="center" class="green">
      <v-col v-for="(item, n) in list" :key="n" sm="12" xs="12" md="12" lg="8" xl="6" class="br text-center red">
        // content
      </v-col>
    </v-row>
  </v-col>
</v-row>
</v-container>

标签： cssvue.jsvuetify.js

Answer 1

你可以用这样的方式包装你的布局：

<v-row justify="center" align="center">
    <v-col cols="10">
      // Your layout goes here
    </v-col>
</v-row>

第一行元素使其中的 col 居中，并且由于 col 元素的 cols 属性设置为 10（或适合您需要的 12 以外的其他数字），因此它与两侧的空间相等。

所以这样你放在这个包装器中的任何布局都会对齐。

编辑：我采用了这个想法并准备了一支笔供您查看。这是笔：

vuetify 布局代码笔