vuetify v-flex xs12只填充宽度的一半

时间:2018-06-15 15:18:43

标签: vue.js vuetify.js

我正在尝试使用vuetify v-flex制作卡片列表,这里是代码

<div id="app">
  <v-app>
    <v-content>
      <v-container fill-height fluid>
        <v-layout>

          <v-flex xs12>
            <v-card dark color="grey">
              <v-card-title>
                <div>
                  <h2>Top Questions</h2>
                </div>
              </v-card-title>
            </v-card>
          </v-flex>

          <v-flex xs12>
            <v-card v-for="item in items" :key="item._id">
              <v-card-title>
                <h3>{{ item.title }}</h3>
                <p>{{ item.content }}</p>
              </v-card-title>
            </v-card>
          </v-flex>
        </v-layout>        
      </v-container>
    </v-content>
  </v-app>
</div> 

我希望每个v-flex将填充100%的行。但是他们只填了一半 https://codepen.io/anon/pen/mKBMEW

但是,我可以在v-layout中添加prop d-inline-block。我只是好奇我之前的第一个代码发生了什么。

3 个答案:

答案 0 :(得分:3)

我认为您需要将column属性添加到v-layout

答案 1 :(得分:2)

当我使用Ikbel的列解决方案时,我的flex-components最大宽度被覆盖为始终为100%。我所做的就是为row wrap赋予v-layout属性。

答案 2 :(得分:0)

给那些再次经历的人。

在最新的 vuetify(来自 v2.x,例如 2.4)中,v-col 上不再有 xs,而是使用 cols=12。

相关帖子:vuetify v-col xs="12" only fill half the width