时间戳

首页 > 解决方案 > 如何在 Vuetify 中不使用“md/sm”将所有图块设置为特定宽度？

javascript - 如何在 Vuetify 中不使用“md/sm”将所有图块设置为特定宽度？

问题描述

<v-row no-gutters>
  <v-col class="item" v-for="(item, index) in items" :key="index">
    <div class="pa-3" style="width: 120px; height: 200px">
      {{ item.name }}
    </div>
  </v-col>
</v-row>

md="3"我想在不使用or的情况下将所有图块设置为一定的宽度sm="4"。
当我测试上面的代码时，浏览器会显示如下结果： 当前结果

但是，我想将第 16 个图块设置为与其他图块相同的宽度，如下所示：
预期结果

我不想使用mdor sm，因为我想单独设置图块的宽度和高度。
如何将所有图块设置为特定宽度，包括最后一个？

这是示例代码：
https ://codesandbox.io/s/vuetify-grid-example-forked-tje7u?file=/src/App.vue

标签： javascriptvue.jsgridvuetify.js

解决方案

我不认为您可以使用v-col道具来实现这一点，我不建议您覆盖默认样式，但是您可以使用简单的 CSS 规则来实现所需的行为：

 <v-container class="pa-1" fluid>
      <section class="grid">
        <div class="item" v-for="(item, index) in items" :key="index">
          <div class="pa-3" style="width: 120px; height: 200px">
            {{ item.name }}
          </div>
        </div>
      </section>
 </v-container>

风格 ：

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,120px)
}

或者您可以做出更多响应：

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))
}

推荐阅读