Question

我正在尝试让我的v-card响应，但我目前还不确定这样做的最佳方法。我希望它能够包装在移动设备上（现在就是这样），但我希望它能够在平板电脑和桌面设备上调整大小，但是内容会从v-card容器中消失。当我调整v-card本身的大小时，是否有人知道调整v-card内容的方法？

到目前为止，我的代码看起来像这样：

 <v-container fluid p0>
   <v-layout wrap row justify-center align-content-center>
    <v-flex xs12 sm12 md4 justify-center align-content-center>
      <v-card height="500px" width="550px"  raised hover>
        <v-card-media src="somes" height="300px" contain>
        </v-card-media>
        <v-card-title primary-title>
          <div>
            <h3 class="headline mb-0">Testing</h3>
            <div flex> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo ante. Vivamus ac lacinia diam. Aenean sed magna ligula. Vivamus ultrices euismod sapien, non egestas erat semper quis. Curabitur lorem erat, finibus at fringilla ut, egestas id sapien. Suspendisse dignissim felis vitae urna ultrices varius. Integer vulputate augue scelerisque.</div>
          </div>
        </v-card-title>
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn flat color="primary">Testing</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>

     <v-flex xs12 sm12 md4 justify-center align-content-center>
          <v-card height="500px" width="550px" raised hover>
        <v-card-media src="some" height="300px">
        </v-card-media>
        <v-card-title primary-title>
          <div>
            <h3 class="headline mb-0">Testing</h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo ante. Vivamus ac lacinia diam. Aenean sed magna ligula. Vivamus ultrices euismod sapien, non egestas erat semper quis. Curabitur lorem erat, finibus at fringilla ut, egestas id sapien. Suspendisse dignissim felis vitae urna ultrices varius. Integer vulputate augue scelerisque.</div>
          </div>
        </v-card-title>
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn flat color="primary">View</v-btn>
        </v-card-actions>
      </v-card>

     </v-flex>


      <v-flex xs12 sm12 md4 justify-center align-content-center>
          <v-card height="500px" width="550px" raised hover>
        <v-card-media src="/static/doc-images/cards/desert.jpg" height="300px">
        </v-card-media>
        <v-card-title primary-title>
          <div>
            <h3 class="headline mb-0">Testing</h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo ante. Vivamus ac lacinia diam. Aenean sed magna ligula. Vivamus ultrices euismod sapien, non egestas erat semper quis. Curabitur lorem erat, finibus at fringilla ut, egestas id sapien. Suspendisse dignissim felis vitae urna ultrices varius. Integer vulputate augue scelerisque.</div>
          </div>
        </v-card-title>
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn flat color="primary">Testing</v-btn>
          <v-btn flat color="primary">View</v-btn>
        </v-card-actions>
      </v-card>

     </v-flex>
     </v-layout>
     </v-container>

我的codepen.

Answer 1

卡片媒体固定高度导致内容向下移出卡片，因为卡片也有固定高度

<div id="app">
<v-container fluid p0>
   <v-layout wrap row>
    <v-flex xs12 sm12 md4>
      <v-card height="80vh" min-width="30vw" elevation-3 hover>
        <v-card-media src="somes" height="30%" contain>
        </v-card-media>
        <v-card-title primary-title class="headline">Testing
        </v-card-title>
        <v-card-text > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo ante. Vivamus ac lacinia diam. Aenean sed magna ligula. Vivamus ultrices euismod sapien, non egestas erat semper quis. Curabitur lorem erat, finibus at fringilla ut, egestas id sapien. Suspendisse dignissim felis vitae urna ultrices varius. Integer vulputate augue scelerisque.
  </v-card-text >
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn flat color="primary">Testing</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
    <v-flex xs12 sm12 md4>
      <v-card height="80vh" min-width="30vw" elevation-3 hover>
        <v-card-media src="somes" height="30%" contain>
        </v-card-media>
        <v-card-title primary-title class="headline">Testing
        </v-card-title>
        <v-card-text > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo ante. Vivamus ac lacinia diam. Aenean sed magna ligula. Vivamus ultrices euismod sapien, non egestas erat semper quis. Curabitur lorem erat, finibus at fringilla ut, egestas id sapien. Suspendisse dignissim felis vitae urna ultrices varius. Integer vulputate augue scelerisque.
  </v-card-text >
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn flat color="primary">Testing</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
    <v-flex xs12 sm12 md4>
      <v-card height="80vh" min-width="30vw" elevation-3 hover>
        <v-card-media src="somes" height="30%" contain>
        </v-card-media>
        <v-card-title primary-title class="headline">Testing
        </v-card-title>
        <v-card-text > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo ante. Vivamus ac lacinia diam. Aenean sed magna ligula. Vivamus ultrices euismod sapien, non egestas erat semper quis. Curabitur lorem erat, finibus at fringilla ut, egestas id sapien. Suspendisse dignissim felis vitae urna ultrices varius. Integer vulputate augue scelerisque.
  </v-card-text >
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn flat color="primary">Testing</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>
</div>

这不是一个确切的解决方案，但这可能有助于弄清楚你想要什么 -

demo codepen

让v-cards响应

1 个答案: