我有一个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>
我想将它们全部放在一行上,以便我可以水平滚动。但是我得到了这个:
如何调整样式以在一行上看到所有文本字段?
最佳答案
Vuetify使用弹性网格。它没有溢出的原因是必须将flex-wrap
设置为nowrap
。
基本上,只需将以下样式添加到您的v-row
中:
.nowrap-overflow {
flex-wrap: nowrap;
overflow-x: auto;
}
修改后的codepen在这里:
https://codepen.io/CodingDeer/pen/zYYGOGd
关于javascript - 在一行上查看文本字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58289656/