在较小的断点处验证多行v-toolbar项

Question

我正在使用Vuetify工具栏，并尝试使用网格系统允许较小断点上的工具栏项移动到新行。本质上，工具栏应该能够在右侧具有许多工具栏项目，当将窗口的大小调整为较小的断点时，它们将开始在新行上将按钮移至其他按钮下方，从而增加了工具栏的高度。] >

我为v-layout / v-flex组合尝试了不同的标志，但是没有得到我需要的结果。

我已经在代码笔上对此进行了测试：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工具栏，并尝试使用网格系统允许较小断点上的工具栏项移动到新行。本质上，工具栏应该可以有很多...

Answer 1

我也是初学者。由于我面临类似的问题，因此，我想分享以下解决方案：