Question

如何在Vuetify网格系统中制作块＆＃34; pink-box＆＃34;，放置在其他高度？＆＃34;身高：100％＆＃34;工作不正确。柱弯曲方向和＆＃34;弯曲：1＆＃34;打破xs6布局。

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-md fill-height>
        <v-layout row wrap align-content-start>
          <v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
          <v-flex xs12 class="pink-box">Rest height box</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

查看Codepen上的已处理代码段：

https://codepen.io/profsoft/pen/wmQRvm

Answer 1

我们必须在容器中使用两个嵌套布局。第一列，用于文本块和休止高度框。第二，嵌套 - 行换行，用于放置在文本块中的正确12点网格系统。

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-md fill-height>
        <v-layout column>
          <v-flex>
            <v-layout row wrap align-content-start>
              <v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
            </v-layout>
          </v-flex>
          <v-flex xs12 class="pink-box">Rest height box</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

请参阅Codepen上的解决方案代码段：

https://codepen.io/profsoft/pen/KoLMrz

Vuetify网格系统。如何将块放置在高度的其余部分？

1 个答案: