vue.js - 在 vuetify 中更改网格中的列宽
问题描述
我在行下有三列,每列的 cols 值为 4。我想减小“col1”的宽度,我试图将 cols 值从 4 更改为 3,但列比我预期的要小。所以我想要一个介于 3 到 4 之间的 cols 值(考虑 cols 值为 3.5)。有没有办法我可以做到这一点?
<div id="app">
<v-app id="inspire">
<v-container class="grey lighten-5">
<v-row no-gutters>
<v-col cols="4">
<v-card>col1</v-card>
</v-col>
<v-col cols="4">
<v-card>col2</v-card>
</v-col>
<v-col cols="4">
<v-card>col3</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
解决方案
正如@Matthias 所指出的,Vuetify 网格基于 Bootstrap,但使用flexbox 网格系统实现。每个“行”总是有 12 个大小相同的“列”,其宽度基于网格容器的宽度(尽管一个v-col
元素可以跨越多个“列”,例如<v-col cols="3>
)。另外,每列之间有一个“gutter”(空白,如margin),行周围有一个margin。因此 1 列的宽度为:
one-col-width = (container-width - ((2 * margin-width) + (11 * gutter-width))) / 12
如果您v-col
跨越多列,则列的宽度为:
col-width = (one-col-width * cols) + (gutter-width * (cols - 1))
网格容器的宽度可以是父元素(包含网格的元素)或页面(如果是全角布局)的计算宽度。
为了控制列的宽度,您的选择是有限的。
选项 #1--更改装订线/边距宽度
默认装订线宽度为 24 像素。您可以通过将dense
属性设置为 on来更改此设置v-row
,这会将装订线宽度减小到 12 像素。您还可以设置完全移除排水沟的no-gutters
道具。v-row
由于 11 * 24px == 264px,这可能会产生显着差异。
选项#2——设置fluid
道具v-container
在周围的网格上设置fluid
道具v-container
将“将容器扩展到所有视口和设备尺寸”。这消除了网格上的水平约束,基本上加宽了所有列。
选项 #3--使用内置边距/填充实用程序
自动边距助手实用程序和间距实用程序是一组可以添加到v-col
元素以调整其边距的类。例如,添加mr-4
为 in<v-col class="mr-4">
将应用 16 像素的右边距。还有其他类似的mx-auto
。这将调整列之间的有效空间,但列本身仍将占用相同数量的空间。
最重要的是,您没有完全的自由,但您可以调整布局以实现一定的灵活性。
推荐阅读
- angular - 服务返回对象数组而不是对象
- php - 使用其他 XML 源扩展 SimpleXML 类
- python - 是否可以从 python 3.8 中的不同目录导入包中的所有模块?
- python - 与 sql alchemy 的烧瓶关系 - 没有这样的表错误
- wordpress - 如何从路径中删除 WordPress 页面?
- python-3.x - 在while循环中比较两个变量时遇到问题
- python - 带有 Python 库的 Excel 中可用的 COM 加载项的拉取列表
- javascript - 在javascript中存储键值对
- flutter - 了解 ListView.builder
- javascript - 单击html中的搜索图标时搜索框不显示光标