如何使文本在 vuetify 页脚上居中？

Question

我正在尝试创建 Vuetify 页脚，但遇到了一些问题。我在这里做了一个 Codepen https://codepen.io/anon/pen/mYazWv。

我是 vuetify 的新手，所以我想看看如何将标题放在中心，然后将复选框与按钮一起向右推，使用太多 垫片

我正在关注 vuetify 官方文档https://vuetifyjs.com/en/components/footer

<v-footer
  height="auto"
  color="primary lighten-1"
>
  <v-card class="flex flat tile"> 
    <v-card-title class="primary lighten-1">
      <v-layout justify-center row wrap>

        <strong class="subheading white--text">
        Some Random Text
      </strong>
      </v-layout>


      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
     <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>

 <v-checkbox dark label="Click Me"></v-checkbox>
        <v-btn v-on:click="saveClicked">
        <v-icon>save</v-icon> Save
      </v-btn>
        <v-btn>
          <v-icon>close</v-icon> Cancel
        </v-btn>
      </v-card-title>
    </v-card>

v-spacer 将按钮推到位，但似乎不适用于复选框。任何帮助将不胜感激。

Answer 1

1. 将grow 类添加到<v-layout>。
2. 将shrink 类添加到<v-checkbox>。

Updated pen.

注意：要将标题左对齐，请从 <v-layout> 中删除 flex 和 justify-center 类。