Question

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

我为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的新手，所以这可能是我在文档中所缺少的。任何帮助将不胜感激。

Answer 1

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

.toolbar__items {
  flex-wrap: wrap;
}

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

在较小的断点处对多行v工具栏项目进行Vuetify

1 个答案: