vuetify中如何填充内容的宽度答案

【问题标题】：How to fill the width of the content in vuetifyvuetify中如何填充内容的宽度
【发布时间】：2018-06-18 06:47:34
【问题描述】：

使用此代码：

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

路由器视图左右两边都有边距

【问题讨论】：

【解决方案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,

【讨论】：

【解决方案2】：

你也可以试试这个，vuetify有helper classes来设置padding和margin

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

【讨论】：

【解决方案3】：

v-container 使用类容器创建一个 div。此类为您的 div 提供了四面八方的填充。（数量取决于viewport breakpoint；xs 为 2px，xl 为 24px）。如果您在 css 中包含以下内容，则您的侧边距应该消失。

.container {
   padding: 0!important
}

【讨论】：