在一行上 Vuetify 文本字段

Question

我有一个 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>

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

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

Answer 1

Vuetify 使用弹性网格。它没有溢出的原因是您必须flex-wrap将nowrap.基本上，只需将以下样式添加到您的v-row：.nowrap-overflow {&nbsp; &nbsp; flex-wrap: nowrap;&nbsp; &nbsp; overflow-x: auto;}在此处修改代码笔：https ://codepen.io/CodingDeer/pen/zYYGOGd