Question

我在https://vuetifyjs.com/en/framework/grid#nested-grid中看到了嵌套网格示例。但是我需要一些不同的布局，并且顺序应该在不同的断点处更改。

所需的布局：

md及以上：https://codepen.io/jcpribeiro/pen/NJReGm
sm及以下：https://codepen.io/jcpribeiro/pen/gEPEOj

请注意顺序是不同的。

在另一个示例中，我可以使用order-xs1（请参阅https://vuetifyjs.com/en/framework/grid#order）在不同布局中使用不同的顺序，但是嵌套网格中的v-flex项并不全部属于同一{{1 }}项目，因此它将无法以相同的方式工作。

我想避免使用javascript移动项目。

有人有什么主意吗？

Answer 1

由于顺序不同，我将在一个布局上应用v-if =“ $ vuetify.breakpoint.mdAndUp”，在另一个布局上应用v-if =“ $ vuetify.breakpoint.smAndDown”。

https://vuetifyjs.com/en/framework/breakpoints#breakpoints

例如：

<v-layout v-if="$vuetify.breakpoint.mdAndUp" row wrap>
  1st set of flex items in here        
</v-layout>
<v-layout v-if="$vuetify.breakpoint.smAndDown" row wrap>
  2nd set flex items in here        
</v-layout>

Vuetify网格系统不允许嵌套网格中的顺序不同

1 个答案: