vuetify.js - Vuetify:五列网格布局
问题描述
Vuetify 使用 12 点网格系统。既然 12 不能被 5 整除,那么如何创建一个具有 5 列相同宽度的网格呢?5 列应占用所有可用空间。
最“正确”的方法是什么?
编辑:我试图实现 John M 的评论,但它并没有填满所有可用的水平空间:
<v-container>
<v-card color="red">
<v-layout wrap align-content-space-around text-xs-center>
<v-flex xs1></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
<v-flex xs1></v-flex>
</v-layout>
</v-card>
</v-container>
解决方案
我也需要一个五列布局,我发现了一些对我有用的东西。我需要lg
屏幕的五列布局,所以我在我的 css 中添加了这些规则:
https://codepen.io/rekam/pen/JmNPPx
/* vuetify lg min breakpoint: 1280 - 16 = 1264px */
/* vuetify lg max breakpoint: 1920 - 16 - 1 = 1903px */
@media (min-width: 1264px) and (max-width: 1903px) {
.flex.lg5-custom {
width: 20%;
max-width: 20%;
flex-basis: 20%;
}
}
您需要在媒体查询中指定最小值和最大值,因为您不指定,所以该20%
规则将适用于所有尺寸。只需在您的模板中使用它,如下所示:
<!-- md4 is just here as an example -->
<v-layout row wrap>
<v-flex md4 class="lg5-custom">box 1</v-flex>
<v-flex md4 class="lg5-custom">box 2</v-flex>
<v-flex md4 class="lg5-custom">box 3</v-flex>
<v-flex md4 class="lg5-custom">box 4</v-flex>
<v-flex md4 class="lg5-custom">box 5</v-flex>
<v-flex md4 class="lg5-custom">box 6</v-flex>
<v-flex md4 class="lg5-custom">box 7</v-flex>
</v-layout>
推荐阅读
- laravel - 让 laravel、vuejs 和 Flutter 协同工作的最佳方式是什么?
- excel - 带有 Excel VBA 的幻灯片指示器
- javascript - 有什么不同 '
' 和 '{ Toolbar() }' 在反应渲染中? - python - 使用opencv从验证码中提取字母
- mysql - 替换列中的值而不创建新列
- php - 在 Symfony 中默认机制之外的机制中启用依赖注入
- c# - ContextMenu 绑定被破坏
- bash - 通过 Bash 在外部文件中指定 java/system 属性
- python - 如何从父实例调用子类中的方法?
- sql-server - 查找包含在任何表对象中不可用的列的视图对象