V工具栏中的Vuetify网格系统

Question

鉴于我有以下工具栏

    <v-toolbar
  color="blue darken-1"
  dark
  app
  clipped-left
  fixed
>
  <v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <span class="hidden-xs-only">eventzimmer</span>
  </v-toolbar-title>
  <v-text-field
    light
    solo
    prepend-inner-icon="search"
    placeholder="Search"
    class="mt-2"
  ></v-text-field>
  <div class="d-flex align-left ml-1">
    <v-btn icon>
      <v-icon>
        location_on
      </v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>
        date_range
      </v-icon>
    </v-btn>
  </div>
</v-toolbar>

如何使用vuetify网格系统实现水平网格？ 假设我使用的文档中的网格示例看起来像

<v-container fluid>
  <v-layout row wrap>
    <v-flex xs-8>
     <v-text/>
    </v-flex>
    <v-flex xs-4>
     <buttons/>
    </v-flex>
  </v-layout>
</v-container>

但是不幸的是，这看起来很笨拙。这些文档并没有真正为水平对齐提供示例。任何例子都将不胜感激！