如何在vuetify中对视图应用更多填充？

Question

我试图通过在视图容器中使用“ px-5”类填充视图的内容。但是我似乎无法按我的意愿来填充内容。我正在寻找的内容与该firebase屏幕截图中的内容相同：

我的App.Vue看起来像这样：

  <v-content>
      <div class="page-wrapper">
        <page-header></page-header>
          <router-view/>
      </div>        
  </v-content>

在视图中：

<template>
  <div id="pageTable">
    <v-container grid-list-xl fluid px-5 pt-1 mx-auto>
      <h2>Mina ordrar</h2>
      <v-layout row wrap>
     <v-flex xs12 md12 lg12>
<v-data-table
      :headers="headers"
      :items="orders"
      class="elevation-1"
    >
    </v-data-table>
        </v-flex>
    </v-layout>
     </v-container>
  </div>
</template>

任何想法我在做什么错了？

在我的网站上填充：

Answer 1

您正在使用mx-auto来保持内容居中，然后在内部容器上设置max-width。

以@ljubadr的注释为基础的更好的建议-您可以在包装器上使用justify-center-然后使用网格列设置取决于断点的宽度，例如sm-12 md-8将占2/3中等断点及以上的可用空间，但在较小的屏幕上将填满所有可用空间。

Answer 2

如果使用手写笔加载程序，则可以在导入样式之前覆盖$spacer变量。默认情况下，它设置为16像素。覆盖此变量将重新计算每个元素的间距，这将在您的应用程序中保持一致的间距。

如果您想完全完成其他事情，则可以覆盖$spacer-x，$spacer-y或$spacers变量。它们的默认值如下：

$spacer := 16px
$spacer-x := $spacer
$spacer-y := $spacer
$spacers := {
  zero: {
    x: 0,
    y: 0
  },
  one: {
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  },
  two: {
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  },
  three: {
    x: $spacer-x,
    y: $spacer-y
  },
  four: {
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  },
  five: {
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  }
}

^（source）

如果您不希望更改vuetify组件的整体利润，则可能只想定义自己的实用程序类，而超越m-5 / p-5。