如何在 vuetify 中为我的视图应用更多填充？

Posted 2023-02-23

【中文标题】如何在 vuetify 中为我的视图应用更多填充？

【英文标题】：How do I apply more padding to my view in vuetify?

【发布时间】：2019-06-13 15:08:21

【问题描述】：

我正在尝试通过在视图中的容器上使用“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>

任何想法我做错了什么？

在我的网站上填充：

【问题讨论】：

检查grid example。您正在寻找justify-center

【参考方案1】：

如果您使用手写笔加载器，您可以在导入样式之前覆盖$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。

【参考方案2】：

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

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