Vue + Vuetify -根据内容改变v-col大小
Vue + Vuetify -根据内容改变v-col大小
提问于 2022-10-07 11:38:20
为了保持简单，我将发布我需要做的事情的简化版本。
假设我有以下组件
<template>
<div style="width: 50vw; height: 40vh;">
<v-container fluid>
<v-row style="background-color: #222222" class="fill-height">
<v-col cols="12" lg="8" xl="8" style="background-color: #ff0000"><h1>Breakpoint: {{$vuetify.breakpoint.name}}</h1></v-col>
<v-col cols="12" lg="4" xl="4" style="background-color: #00FF00"><v-img src="https://picsum.photos/256/256" min-height="256px" min-width="256px" max-height="256px" max-width="256px"/></v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
}
</script>以下是浏览器上的样子：
这是它开始破裂的地方。
我需要一个响应列，它有一个固定宽度和高度的内部组件。
我能做些什么来解决它吗？
回答 1
Stack Overflow用户
发布于 2022-10-07 15:59:09
如果您没有为第一列指定一些col宽度，那么它将自动尝试并使用所有剩余的空间。第二列可以使用cols="auto"，这将为内部的任何内容提供足够的空间。我相信他们会一起完成你想要的反应。以这个码箱为例。注意，该示例还在overflow-wrap: anywhere;文本上使用h1进一步防止对列进行包装，直到绝对必要为止。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73986620
复制相关文章
相似问题
腾讯云开发者
