Vuetify v-btn水平右

Question

我正在尝试使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>

Answer 1

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

  <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>

上面的代码的结果是：

Answer 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/

Answer 3

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