Question

在对齐某些v-btn和一个v输入时，我需要一些帮助。我正在尝试创建一个“记录导航”控件，我需要它在水平中间对齐。我拥有的是

我需要的是

我的代码是

          <v-card-action>  
              <v-layout row d-flex class="text-center">
                <div class="my-15 ml-15 text-center">                     
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('first')"
                  >First</v-btn>
                  <v-btn
                    class="ma-2"
                    text
                    round
                    color="primary"
                    @click="navChange('previous')"
                  >Previous</v-btn>
                  <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

                  <v-btn class="ma-2" text round color="primary" @click="navChange('next')">Next</v-btn>
                  <v-btn class="ma-2" text round color="primary" @click="navChange('last')">Last</v-btn>
                </div>
                <div class="my-15"></div>                  
              </v-layout>                
            </v-card-action>

并在其中有一些codepen代码

https://codepen.io/morgenweck/pen/yLLdydN

我是Vue的新手，似乎某些标准HTML代码在v-card-action区域中无法正常工作。感谢所有帮助。

Answer 1

如果这样做的话，您根本无法将它们包装在v-card-actions中。

如果仍然没有，请尝试将每个组件放在一列中，并将标签col="2"用于按钮，将col="4"用于输入字段，如下所示：

（并且使用v-row代替v-layout）

<v-row class="text-center">
  <div class="my-15 ml-15 text-center">
    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('first')"
      >
        First
      </v-btn>
    </v-col>
    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('previous')"
      >
        Previous
      </v-btn>
    </v-col>
    <v-col cols="4">
      <v-text-field
        width="10px"
        v-model="recordNav"
        class="centered-input"
      ></v-text-field>
    </v-col>

    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('next')"
      >
        Next
      </v-btn>
    </v-col>

    <v-col cols="2">
      <v-btn
        class="ma-2"
        text
        round
        color="primary"
        @click="navChange('last')"
      >
        Last
      </v-btn>
    </v-col>
  </div>
  <div class="my-15"></div>
</v-row>

您可以使用cols属性来确定元素应连续占用多少空间。最大值为12。因此，如果要连续两个元素相邻，则为它们赋予属性cols="6"，如果想要连续三个元素，则将其赋予cols="4"（因为12/3 = 4），等等，你就明白了。

在更大的屏幕上（cols用于手机），您可以不同地对齐元素。例如，如果您给每个元素赋予属性cols="12"，则可以将它们放置在新行中，但是如果您想在平板电脑的同一行中拥有2个元素，则可以在两个元素上使用sm =“ 6”。如果您希望元素的位置相同，无论屏幕大小如何，都可以在所有cols标签上使用col。

您可以在https://vuetifyjs.com/en/components/grids

处进一步阅读

Answer 2

我对布局进行了改进，使其更符合您的目标。

主要问题是：

v-card-actions

错别字-动作是复数
将按钮容器的flex-direction设置为no-wrap（为此我替换了v-row以使用道具）
按钮上不推荐使用round道具，因此我们现在需要使用rounded
删除text道具，以便获得按钮的药丸形状和背景颜色

我还在按钮上设置了一个已定义的width，以便它们都具有相同的大小，并在按钮容器上添加了左，右填充。

我建议全屏查看代码段，以免控制台消息突出显示。

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    //
    recordNav: "Record: 1 of 15"
  })
  
})

.centered-input input {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.11/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.11/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-row align="center" justify="center">
      <v-card>
        <v-card-actions>  
          <v-row row d-flex nowrap align="center" justify="center" class="px-2">
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('first')"
            >First</v-btn>
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('previous')"
            >Previous</v-btn>
            <v-text-field width="10px" v-model="recordNav" class="centered-input"></v-text-field>

            <v-btn 
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('next')"
            >Next</v-btn>
            <v-btn
              class="ma-2"
              rounded
              width="6.5rem"
              color="primary"
              @click="navChange('last')"
            >Last</v-btn>
            
            <div class="my-15"></div>                  
          </v-row>                
        </v-card-actions>
      </v-card>
    </v-row>
  </v-app>
</div>

V卡动作区域中Vuetify v-btn和v输入的布局

2 个答案: