更改 vuetify 网格中的列宽

我在行下有三列，每列的 cols 值为 4。我想减小“col1”的宽度，我尝试将 cols 值从 4 更改为 3，但列变得比我预期的要小。所以我想要一个介于 3 到 4 之间的 cols 值（考虑 cols 值为 3.5）。我有办法实现这个目标吗？

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col cols="4">
          <v-card>col1</v-card>
        </v-col>
        <v-col cols="4">
          <v-card>col2</v-card>
        </v-col>
        <v-col cols="4">
          <v-card>col3</v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

正如@Matthias 所指出的，Vuetify 网格 https://vuetifyjs.com/en/components/grids/基于 Bootstrap 但实现的是弹性盒网格系统 https://css-tricks.com/snippets/css/a-guide-to-flexbox/。每个“行”都会always有 12 个大小相等的“列”，其宽度基于网格容器的宽度（尽管v-col元素可以跨越多个“列”，例如<v-col cols="3>）。此外，每列之间有一个“装订线”（空白空间，就像边距），并且行周围有一个边距。因此 1 列的宽度为：

one-col-width = (container-width - ((2 * margin-width) + (11 * gutter-width))) / 12

If your v-col跨越多列，则该列的宽度为：

col-width = (one-col-width * cols) + (gutter-width * (cols - 1))

网格容器的宽度是父元素（包含网格的元素）或页面（如果是全角布局）的计算宽度。

为了控制列的宽度，您的选择是有限的。

选项#1——更改装订线/边距宽度

默认装订线宽度为 24 像素。您可以通过设置来更改此设置dense属性于v-row，这会将装订线宽度减少到 12px。您还可以设置no-gutters支撑v-row这完全消除了排水沟。由于 11 * 24px == 264px，这可能会产生显着差异。

选项 #2——设置fluid支撑在v-container

设置fluid支撑在v-container围绕网格将“将容器扩展到所有视口和设备尺寸”。这消除了网格上的水平限制，本质上加宽了所有列。

选项#3——使用内置边距/填充实用程序

The 自动保证金助手实用程序 https://vuetifyjs.com/en/styles/flex/#auto-margins and 间距实用程序 https://vuetifyjs.com/en/styles/spacing/是一组您可以添加到您的v-col元素来调整其边距。例如，添加mr-4 as in <v-col class="mr-4">将应用 16px 右边距。还有其他类似的mx-auto。这将调整列之间的有效空间，但列本身仍将占用相同的空间量。

最重要的是，您没有完全的自由，但您可以调整布局以实现一定的灵活性。