javascript - 在一行中验证文本字段

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 网格。它没有溢出的原因是你必须将 flex-wrap 设置为 nowrap。

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

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

修改后的codepen: https://codepen.io/CodingDeer/pen/zYYGOGd