时间戳

首页 > 解决方案 > 如何在 vuetify 中为我的视图应用更多填充？

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

问题描述

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

任何想法我做错了什么？

在我的网站上填充：

我的网站

标签： cssvue.jsvue-componentvuetify.js

解决方案

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

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

推荐阅读