[英]Vuetify multi-line v-toolbar-items on smaller breakpoints
我正在使用 Vuetify 工具栏,并尝试使用网格系统允许较小断点上的工具栏项目移动到新行。 本质上,工具栏应该能够在右侧有许多工具栏项目,当将窗口调整为较小的断点时,将开始将按钮移动到新行上的其他按钮下方,同时增加工具栏的高度。
我为 v-layout/v-flex 组合尝试了不同的标志,但没有得到我需要的结果。
我一直在 codepen 上对此进行测试: https ://codepen.io/rpreilley/pen/JebLGz
调整窗口大小时,工具栏项目中的按钮不会移动到布局上带有换行标志的新行。
这是模板代码。 我严格处理 HTML 模板,而不是任何 css 或数据:
<div id="app">
<v-app>
<v-content>
<v-layout>
<v-toolbar dense flat>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field
hide-details
prepend-icon="search"
single-line
></v-text-field>
<v-spacer></v-spacer>
<v-layout justify-end row wrap>
<v-toolbar-items>
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
<v-btn flat>Link Four</v-btn>
<v-btn flat>Link Five</v-btn>
<v-btn flat>Link Six</v-btn>
</v-toolbar-items>
</v-layout>
</v-toolbar>
</v-layout>
</v-content>
</v-app>
</div>
我是 vuetify 的新手,所以这可能是我在文档中遗漏的东西。 任何帮助将不胜感激。
我也是 vuetify 的新手。 由于我面临类似的问题,这是我想分享的解决方案:
.toolbar__items {
flex-wrap: wrap;
}
代码笔: https ://codepen.io/imtiazmahbub/pen/QWjQjML
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.