小编Res*_*omo的帖子

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

我正在尝试使用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> 
Run Code Online (Sandbox Code Playgroud)

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

但是,我可以d-inline-block在v-layout上添加prop 。我只是想知道之前我的第一个代码会发生什么。

vue.js vuetify.js

4
推荐指数
2
解决办法
6152
查看次数

标签 统计

vue.js ×1

vuetify.js ×1