vuetify.js - Vuetify 网格系统 - 如何删除 v-col 边距?
问题描述
我试图让三个 v-btn 在宽屏幕中水平显示,在移动设备中垂直显示。
下面的代码完成了这项工作,但是 v-col 的大小太宽了,所以按钮之间的距离太远了。
如何确保 v-col 只占用其中内容的空间?
<v-container
class="ma-0 pa-0"
fluid
>
<v-card
max-width="100%"
tile
flat
max-height="500px"
>
<v-parallax
:src="require('../photo.jpeg')"
fluid
>
<v-row
align="center"
justify="center"
align-content="center"
class="no-gutters ma-2"
>
<v-col
class="text-center no-gutters"
cols="12"
sm="4"
>
<v-btn>Hello</v-btn>
</v-col>
<v-col
class="text-center no-gutters"
cols="12"
sm="4"
>
<v-btn>Hello</v-btn>
</v-col>
<v-col
class="text-center no-gutters"
cols="12"
sm="4"
>
<v-btn>Hello</v-btn>
</v-col>
</v-row>
</v-parallax>
</v-card>
</v-container>
解决方案
推荐阅读
- assembly - MASM:如何解决错误“不允许立即操作数”
- azure-devops - Odata 查询以从 azure 分析服务获取基于标记的测试用例计数
- tensorflow - 导入张量流
- python - ModuleNotFoundError:没有名为“azure”的模块
- java - 从文件中获取 WEB_URL
- android - 如何处理 BillingClient.onBillingServiceDisconnected()?
- javascript - 我需要一种方法,我的机器人可以用 8ball 命令之类的随机响应进行响应
- c++ - 如何在 C++ 中实现“反向应用功能”?
- java - 如何添加多个反应以嵌入 Discord JDA
- powershell - 当我尝试通过 Get-scheduleTask 获取任务时显示错误