时间戳

首页 > 解决方案 > 如何在vuetify中制作具有相同宽度的不同文本长度的2个按钮？

button - 如何在vuetify中制作具有相同宽度的不同文本长度的2个按钮？

问题描述

在这里，我使用vuetifyjs创建按钮，并且我将按钮的大小设置为大。我可以看到按钮大小的变化，但我只能看到我所有的按钮大小不同。我想让我的所有按钮都具有相同的高度和宽度，所有按钮的大小都相同。请任何人都可以帮助我。

这是我的代码：

<template>

<div class="text-center">
    <v-btn 
       dark large
       min-width: 0;
      class="ma-2"

      color="red"
    >
      Red
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="pink"

    >
      Pink
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="purple"

    >
      Purple
    </v-btn>

       <v-btn
       dark large
      class="ma-2"

      color="light-blue"

    >
      Light-Blue
    </v-btn>

    <v-btn
    dark large
      class="ma-2"

      color="brown"

    >
      Brown
    </v-btn> <br/>

    <v-btn
    dark large
      class="ma-2"

      color="orange"

    >
      Orange
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="green"

    >
      Green
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="teal"

    >
      Teal
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="yellow"

    >
      Yellow
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="cyan"

    >
      Cyan
    </v-btn><br/>

        <v-btn
        dark large
      class="ma-2"

      color="amber"

    >
      Amber
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="lime"

    >
      Lime
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="grey"

    >
      Grey
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="blue-grey"

    >
      Blue-Grey
    </v-btn>


 <v-btn     
 dark large

class="ma-2 white--text"
  color="black"
  >

  Black
</v-btn>


</div>


</template>

标签： buttonsizevuetify.js

解决方案

你应该使用block道具：

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="6">
        <v-btn block color="red" dark>Short Button</v-btn>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="6">
        <v-btn block color="green" dark>A Very Long Button</v-btn>
      </v-col>
    </v-row>
  </v-app>
</div>

请参阅：https ://v2.vuetifyjs.com/en/components/buttons/#block

推荐阅读