Vuetify 文本字段在一行

Posted 2023-02-23

【中文标题】Vuetify 文本字段在一行

【英文标题】：Vuetify text fields on one line

【发布时间】：2020-02-05 22:27:33

【问题描述】：

我有这个用于 Vue 组件的模板（参见 CODEPEN）：

<div class="some-class">
    <v-form >
        <v-container @click="someMethod()">
            <v-row>
                <v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
                    <v-text-field :placeholder="p" single-line outlined >
                    </v-text-field>
                </v-col>
            </v-row>
        </v-container>
    </v-form>
</div>

其中placeholders 是一个数组，如：

['Title 1', 'Title 2', 'Title 3',...'Title 21']

而some-class 在组件的样式部分：

<style>
    div.some-class 
        display: inline-block;
        max-width: 100%;
        overflow-x: auto;
    
</style>

我想把它们全部放在一行上，这样我就可以水平滚动了。但相反，我得到了这个：

如何调整样式以在一行中查看所有文本字段？

【参考方案1】：

Vuetify 使用弹性网格。它没有溢出的原因是您必须将flex-wrap设置为nowrap。

基本上，只需将以下样式添加到您的v-row：

.nowrap-overflow 
    flex-wrap: nowrap;
    overflow-x: auto;

这里修改了codepen： https://codepen.io/CodingDeer/pen/zYYGOGd

【讨论】：

非常感谢@Cathy Ha 我几乎放弃了这个

谢谢帮助我，为我工作了 "margin-inline: auto"