社区首页 >问答首页 >Vuetify:具有五列的网格布局

问Vuetify:具有五列的网格布局
EN

Stack Overflow用户

提问于 2018-08-17 11:49:09

回答 3查看 15.6K关注 0票数 4

Vuetify使用12点网格系统。由于12不能被5整除，如何创建具有相同宽度的5列的网格？这5列应该占据所有可用空间。

做这件事最“正确”的方法是什么？

编辑:我试图实现John M的评论，但它没有填满所有可用的水平空间：

<v-container>
  <v-card color="red">
    <v-layout wrap align-content-space-around text-xs-center>
      <v-flex xs1></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
      <v-flex xs1></v-flex>
    </v-layout>
  </v-card>
</v-container>

我希望红色区域消失：

vuetify.js

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-10-11 07:45:08

我也需要一个五列的布局，我找到了一些适合我的东西。我需要lg屏幕的五列布局，所以我在我的css中添加了以下规则：

https://codepen.io/rekam/pen/JmNPPx

/* vuetify lg min breakpoint: 1280 - 16     = 1264px */
/* vuetify lg max breakpoint: 1920 - 16 - 1 = 1903px */

@media (min-width: 1264px) and (max-width: 1903px) {
    .flex.lg5-custom {
        width: 20%;
        max-width: 20%;
        flex-basis: 20%;
    }
}

您需要在媒体查询中指定最小和最大值，因为您没有指定，因此20%规则将适用于所有大小。只需在您的模板中使用它，如下所示：

<!-- md4 is just here as an example -->
<v-layout row wrap>
    <v-flex md4 class="lg5-custom">box 1</v-flex>
    <v-flex md4 class="lg5-custom">box 2</v-flex>
    <v-flex md4 class="lg5-custom">box 3</v-flex>
    <v-flex md4 class="lg5-custom">box 4</v-flex>
    <v-flex md4 class="lg5-custom">box 5</v-flex>
    <v-flex md4 class="lg5-custom">box 6</v-flex>
    <v-flex md4 class="lg5-custom">box 7</v-flex>
</v-layout>

票数 8

Stack Overflow用户

发布于 2018-10-02 15:46:34

内容必须在卡片组件中吗？我这么问是因为你的问题中没有具体说明。如果不是这样，你可以通过移除卡片组件并替换/添加一些道具到你的容器和布局组件来实现这一点。

<div id="app">
  <v-container align-center text-xs-center>
    <v-layout justify-center>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
    </v-layout>
  </v-container>
</div>

票数 0

Stack Overflow用户

发布于 2021-09-05 04:46:23

我需要的是5列网格在中等大小的显示后，我写了一个带有断点条件的内联样式

  <v-row>
    <v-col v-for="n in 10"
         :style="$vuetify.breakpoint.mdAndUp ? ' flex: 1 0 18%;' : ''"
         cols="6"
         sm="3" >
         {{items inside each column}}
    </v-col>
  </v-row>