在较小的断点上 Vuetify 多行 v-toolbar-items

Posted 2023-02-22

【中文标题】在较小的断点上 Vuetify 多行 v-toolbar-items

【英文标题】：Vuetify multi-line v-toolbar-items on smaller breakpoints

【发布时间】：2019-04-16 11:45:54

【问题描述】：

我正在使用 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 的新手，所以这可能是我在文档中遗漏的内容。任何帮助将不胜感激。

【参考方案1】：

我也是 vuetify 的新手。由于我面临类似的问题，这是我想分享的解决方案：

.toolbar__items 
  flex-wrap: wrap;

Codepen：https://codepen.io/imtiazmahbub/pen/QWjQjML

【讨论】：

谢谢，但这不是一个真正的解决方案...这些项目包裹在工具栏高度内，如果您有小文本以外的任何内容，这是不够的。在里面放一些图标，看起来真的很糟糕。