laravel - Vuetify 差距很大组件及其可选内容

Question

为什么我的选择框和它的可选内容之间有这么大的距离？

我在 Laravel 7 的 VueJS 组件中使用 Vuetify。

<template>
  <v-app class="container">
    <v-data-table
      hide-default-header
      hide-default-footer
      :headers="headers"
      :items="items"
      :items-per-page="filter.items_per_page"
      @click:row="getData"
      no-data-text="No data."
      dense
      style="background: transparent"
    >
      <template
        v-slot:footer
        v-if="items.length"
      >
          <v-row no-gutters>
            <v-col cols="2">
              <v-select
                :items=[10,50,100]
                v-model="filter.items_per_page"
                @change="onPageChange(1)"
                label="Rows per page"
                outlined
                dense
              ></v-select>
            </v-col>
          </v-row>
      </template>
    </v-data-table>
  </v-app>
</template>

=== 编辑 ===

Vuetify 变量的加载方式如下：

resources/sass/app.scss

@import '~vuetify/dist/vuetify.min.css';
@import '~@mdi/font/css/materialdesignicons.min.css';