Css 在添加间距的vuetify网格中居中n个v列的数量

我正试图将

n

数量的v-cols与cols的左右间距居中，但无法将

v-cols

与上述

v-cols

对齐。请注意，响应功能按预期工作，但在最大屏幕大小下，我希望将其限制为两个

v-cols

，并将其与其他

v-row

水平长度对齐，同时保持v-cols的长度相同

目前我得到的是：

从

---

您可以用如下方式包装布局：

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

//你的布局在这里

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

这样，你放在这个包装里的任何布局都会对齐

编辑：我有了这个想法，准备了一支笔给你看。这是钢笔：

---

嘿，谢谢你的回答-我可能忘了提及，但我想将动态v-COL的数量限制为每行2个。动态v形栏与上面的v形栏宽度相同（上图）。这就是我无法将其居中并与上面的v-cols对齐的地方，当只有2个v-cols时，它们是完全对齐的。但是，如果有3个或更多，它将在一行中显示3个v-col，并且不会与上面的v-row对齐。@asisleep更新了代码笔示例（如果我没有误解您的意思的话），但基本上您可以通过将其col prop设置为6将v-col限制为每行2个，但我通过在一行>col>row结构中添加v-col解决了这一问题！：）谢谢

<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>

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