Vuetify v-tabs小屏左侧留白 如何让组件占满可视屏幕宽度

1. 属性调整（优先推荐） #

你当前的配置存在两个问题，先调整属性即可解决大多数场景的空白问题：

• 你的代码中continuous属性拼写错误（写成了coninuous，少了字母t），属性不生效会导致标签排列异常
• centered属性会让标签组在总宽度小于容器宽度时居中显示，小屏场景下会出现左右空白，可以用断点动态控制仅在大屏开启居中
• 新增grow属性可让标签自动平分容器宽度，直接占满父容器

调整后代码示例：

<v-col cols="12" md="8" lg="9">
  <v-tabs
    continuous
    :show-arrows="false"
    color="rgba(255, 255, 255, 0.6)"
    :centered="$vuetify.breakpoint.mdAndUp"
    center-active
    icons-and-text
    grow
  >
    <!-- 此处为你的v-tab项 -->
  </v-tabs>
</v-col>

如果不需要标签平分宽度，仅需要左对齐占满容器，去掉grow属性即可。

2. 样式覆盖（属性调整不生效时使用） #

如果是Vuetify内置的小屏默认内边距导致的空白，添加自定义样式穿透即可：

/* Vue/Nuxt单文件组件带scoped属性时，需要加穿透前缀，不同预处理器穿透写法略有不同，以下为通用示例 */
::v-deep .v-tabs__container,
::v-deep .v-tabs__slider-wrapper {
  padding: 0 !important;
}

3. 父容器校验 #

检查外层v-col的父级v-container是否添加了fluid属性，未添加时小屏会有默认左右边距，导致v-tabs无法占满视口宽度，给v-container添加fluid属性即可。

内容的提问来源于stack exchange，提问作者baer999