如何在vuetify中填充内容的宽度

Question

1. 我想要的是用vuetify填充整个手机屏幕的宽度

使用此代码：

 <v-content>
    <router-view>
      <v-container fluid></v-container>
    </router-view>
  </v-content>

路由器视图在左侧和右侧都有一个边距

1. 并且底部导航已经安装在屏幕上，我不会拖动屏幕来显示底部导航

Answer 1

我只需要在移动设备上动态删除填充，这对我有用：

<v-container :class="{'px-0': $vuetify.breakpoint.xsOnly }">
   <router-view> </router-view>
</v-container>

截至目前，我找不到太多文档，但是查看code我找到了这些文档：

// Breakpoint ranges. 
xsOnly,
smOnly, 
smAndDown,
smAndUp,
mdOnly,
mdAndDown,
mdAndUp,
lgOnly,
lgAndDown,
lgAndUp,
xlOnly,

Answer 2

v-container使用类容器创建一个div。这个类给出了你所有方面的div填充。 （金额根据viewport breakpoint而变化; xs为2px，xl为24px）。如果你在css中包含以下内容，你的侧垫应该消失。

.container {
   padding: 0!important
}

Answer 3

您也可以尝试此操作，vuetify具有helper classes来设置填充和边距

<v-container fluid  class="pa-0 ma-0">
</v-container>