【问题标题】:Vuetify vertical divider with textVuetify 带有文本的垂直分隔线
【发布时间】:2021-08-03 14:14:38
【问题描述】:

我希望使用 vuetify 添加垂直分隔线以及中间的文本。我发现了这个link,它正在添加一个带有文本的水平分隔线。我尝试将代码修改为<v-row align="center"> <v-divider vertical></v-divider>yeah<v-divider vertical></v-divider> </v-row>,但无法获得所需的结果。任何帮助,将不胜感激。 期望的结果

    |
   yeah
    |

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案1】:

    你可以这样做这样:

    <v-row wrap no-gutters>
        <v-col cols="12" class="text-center">
            <v-divider vertical />
        </v-col>
        <v-col cols="12" class="text-center"> some </v-col>
        <v-col cols="12" class="text-center">
            <v-divider vertical />
        </v-col>
    </v-row>
    

    【讨论】:

      【解决方案2】:

      试试这个:

              <v-divider vertical class="mx-4"></v-divider>yeah<v-divider vertical class="mx-4"></v-divider>
      

      由于您没有设置边距,因此分隔线正对着文本,因此很难看到。

      【讨论】:

      • 您可以在我添加的codepen链接中尝试。这不是想要的结果
      猜你喜欢
      • 1970-01-01
      • 2011-05-29
      • 1970-01-01
      • 2020-05-14
      • 2017-07-21
      • 1970-01-01
      • 2011-03-17
      • 2021-08-27
      • 1970-01-01
      相关资源
      最近更新 更多