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

【问题标题】：How to have the button span the whole width?如何让按钮跨越整个宽度？
【发布时间】：2020-08-30 01:20:15
【问题描述】：

我正在使用带有布局的 Vuetify 卡，并在复选框选择时在卡内渲染一些 dynamic vuetify components，这些复选框呈现 divider、spacer、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>

任何帮助将不胜感激。非常感谢。

【问题讨论】：

"整个宽度？"你说的是卡的边缘？（“无填充”）。
我的错，绝对是填充。就像flex xs11 的宽度一样。
使用.flex.xs12 (12 = flex-basis: 100%;)。
没关系。 @EzraSiton 成功了。
您可以将此添加为答案。我会接受的。

标签： javascript css vue.js vuetify.js

【解决方案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

【讨论】：