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

Question

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

使用此代码:

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

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

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

Answer 1

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

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

到目前为止,我找不到很多文档,但查看我发现的代码:

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

Answer 2

v-container 使用类容器创建一个 div。这个类为你的 div 提供了四面八方的填充。（数量根据视口断点而变化；xs 为 2px，xl 为 24px）。如果您在 css 中包含以下内容，则您的侧边距应该消失。

.container {
   padding: 0!important
}