如何让按钮跨越整个宽度？

Question

我正在使用带有布局的 Vuetify 卡，并dynamic vuetify components在复选框选择上渲染卡的一些内部，该复选框选择呈现 a divider、 aspacer或toolbar，button但我无法弄清楚如何使按钮跨越整个宽度？

基本上dynamic button应该看起来像最后呈现整个宽度的按钮。

请检查这个codepen。

请检查这个工作示例：-

new Vue({
  el: "#app",
  data() {
    return {
      pricing: [{
          text: "Actual price:",
          value: "$17,000",
        },
        {
          text: " Discount",
          value: "$12,345",
        }
      ],
      elements: [{
          title: "Divider",
          value: "v-divider"
        },
        {
          title: "Toolbar",
          value: "v-toolbar"
        },
        {
          title: "Button",
          value: "v-btn"
        }
      ],
      selected: []
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link rel="stylesheet"  href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row>
        <v-flex xs6>
          <v-card>
            <v-card-text>
              <v-layout row justify-space-between v-for="option in pricing" :key="option.value" class="my-3">
                <span :class="option.class">{{option.text}}</span>
                <component v-for="(el, i) in selected" :key="i" :is="el.value"></component>
                <span>{{option.value}}</span>
              </v-layout>
              <v-layout row justify-center>
                <v-flex xs11>
                  <v-btn block>
                    Request
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
          <v-flex v-for="el in elements" :key="el.value">
            <v-checkbox :value="el" v-model="selected" :label="el.title">
            </v-checkbox>
          </v-flex>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

任何帮助将不胜感激。太感谢了。

Answer 1

使用 .flex.xs12 (12 = flex-basis: 100%;) - 或 - 删除xs12（并添加按钮block属性 = flex: 1 0 auto;）。

<!-- block buttons extend the full available width -->
<template>
  <v-btn block>
    Block Button
  </v-btn>
</template>

https://vuetifyjs.com/en/components/buttons/#block