为什么当我添加“bg-red rounded”类时“v-col”的宽度会改变？

Question

我正在尝试使用 vuetify 将数据按块排列。当我向“v-col”添加“bg-red rounded”类时，“v-col”的宽度会发生变化。所以我无法获得所需的网格结构。

这是我的 Vue 文件的模板部分。由于我无法透露确切的代码，我已经删除了列中几个地方的数据。

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-container class="bg-red rounded">
          <v-list class="bg-red font-weight-bold pa-0">
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> CODE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 5568 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> PLACE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> B </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> CODE</v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 123 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6">EXAMPLE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 23456 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> RANGE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 1-10 </v-col>
              </v-row>
            </v-list-item>
          </v-list>
        </v-container>
      </v-col>

      <v-col>
        <v-container class="bg-red rounded">
          <v-list class="bg-red font-weight-bold pa-0">
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> DATE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> April-29-2024 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> TIME </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> 03:55:28 PM IST </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> ADDRESS </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> CBE </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> EXAMPLE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6">123 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> VERSION </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> 2.0 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5">EXAMPLE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> 00000 </v-col>
              </v-row>
            </v-list-item>
          </v-list>
        </v-container>
      </v-col>
    </v-row>

    <v-list class="bg-red font-weight-bold mt-10 rounded">
      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters> </v-col>
          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            justify="center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>

      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters>
            {{ $t(`reader_status.label.ptpSatus`) }}
          </v-col>
          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            justify="center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>

      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters> </v-col>
          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>

      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters> </v-col>

          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            justify="center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>
    </v-list>
  </v-container>
</template>

现在，我想在左列没有数据的剩余空间内填充背景颜色。 所以当我尝试像这样向两列添加背景颜色时

 <v-col class="bg-red rounded">

我可以看到列的宽度发生了变化。

为什么会出现这种情况？以美观的方式排列这些网格的理想方式是什么（顶部块的宽度（有 2 列）= 底部块的宽度）？

Answer 1

v-col 的大小和形状没有改变，只有添加红色背景颜色后才可以看出真实的大小/形状。
您的第一个屏幕截图实际上显示了内部 v-container 的大小和形状（它不使用 v-col 的完整高度，并且通过填充水平限制）。

v-col 上的红色背景填充了 v-container 未使用的空间。您应该能够使用浏览器的 DOM 检查器来验证这一点。

解决方案是添加 background-clip CSS 属性，以便背景颜色不会延伸到元素的填充中，从而保持列之间间距的外观。

<style scoped>
.v-col.bg-red {
  background-clip: content-box;
}
</style>

Vuetify Playground 示例