Vuetify v-btn 水平向右答案

【问题标题】：Vuetify v-btn horizontal rightVuetify v-btn 水平向右
【发布时间】：2020-10-12 16:05:23
【问题描述】：

我正在尝试将 v-btn 向右对齐。我已经尝试了所有方法，但它不起作用，我只想知道让注册按钮位于列的最右侧的最简单方法。

这是Codepen 和代码。

<v-container>
    <v-row class='justify-center'>
      <v-col cols='6'>
        <v-form @submit.prevent='submitForm'>
          <v-text-field label='Username'></v-text-field>
          <v-text-field label='Password' type='password'></v-text-field>
          <v-btn type='submit' class='primary'>Login</v-btn>
          <v-btn class='ml-2'>Register</v-btn>
        </v-form>
      </v-col>
    </v-row>
  </v-container>

【问题讨论】：

您是否出于特定原因回避<div>？

标签： css vue.js vuetify.js

【解决方案1】：

我建议您先将这 2 个按钮包装在一行中。然后将它们分别放在一列中，如下所示：

  <v-container>
    <v-row class='justify-center'>
      <v-col cols='6'>
        <v-form @submit.prevent='submitForm'>
          <v-text-field label='Username'></v-text-field>
          <v-text-field label='Password' type='password'></v-text-field>
          <v-row>
            <v-col xs="6">
               <v-btn type='submit' class='primary'>Login</v-btn>
            </v-col>
            <v-col xs="6" class="d-flex justify-end">
               <v-btn>Register</v-btn>
            </v-col>
          </v-row>
        </v-form>
      </v-col>
    </v-row>
  </v-container>

以上代码的结果是：

【讨论】：

【解决方案2】：

您可以使用弹性框。

<div style="display:flex; justify-content:space-between">
    <div>
        <v-btn type='submit' class='primary'>Login</v-btn>
    </div>
    <div>
        <v-btn class='ml-2'>Register</v-btn>
    </div>

有关弹性盒的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案3】：

您可以将按钮包装在 div 中并将其设置为 display:flex。这里是codepen。如果您需要两个按钮都在右侧，请将 justify-space-between 替换为 flex-end

【讨论】：