在 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 网格基于 Bootstrap,但使用flexbox 网格系统实现。每个“行”将总是有 12 个大小相同的“列”,其宽度基于网格容器的宽度(尽管v-col元素可以跨越多个“列”,例如<v-col cols="3>)。另外,每列之间有一个“gutter”(空白,如margin),行周围有一个margin。因此 1 列的宽度为:

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

如果您的v-col跨越多列,则列的宽度为:

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

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

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

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

默认装订线宽度为 24 像素。您可以通过在v-row上设置dense属性来更改此设置,这会将装订线宽度减小到 12px。您还可以在v-row上设置no-gutters道具,以完全去除排水沟。由于 11 * 24px u003du003d 264px,这可能会产生重大影响。

Option #2–在v-container上设置fluid属性

在网格周围的v-container上设置fluid属性将“将容器扩展到所有视口和设备尺寸”。这消除了网格上的水平约束,基本上加宽了所有列。

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

自动边距助手实用程序和间距实用程序是一组可以添加到v-col元素以调整其边距的类。例如,在<v-col class="mr-4">中添加mr-4将应用 16px 的右边距。还有其他的像mx-auto。这将调整列之间的有效空间,但列本身仍将占用相同数量的空间。

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