在 vuetify 中更改网格中的列宽

Question

我在行下有三列，每列的 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>

Answer 1

正如@Matthias 所指出的，Vuetify 网格基于 Bootstrap，但使用flexbox 网格系统实现。每个“行”将始终有 12 个相同大小的“列”，其宽度基于网格容器的宽度（尽管一个v-col元素可以跨越多个“列”，例如<v-col cols="3>）。另外，每列之间有一个“gutter”（空白，像边距），行周围有一个边距。因此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--更改装订线/边距宽度

默认装订线宽度为 24px。您可以通过将dense属性设置为on来更改此设置v-row，从而将装订线宽度减少到 12px。您还可以设置完全移除排水沟的no-gutters道具v-row。这可以产生显着差异，因为 11 * 24px == 264px。

选项#2--设置fluid道具v-container

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

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

该自动保证金帮助工具和间距事业是一组可以添加到您的类v-col元素来调整他们的利润。例如，添加mr-4as in<v-col class="mr-4">将应用 16px 的右边距。还有其他类似的mx-auto。这将调整列之间的有效空间，但列本身仍将占用相同的空间量。

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