Foundation 网格实例5

简介: 列布局中,`.small-centered` 类可使列在小屏幕上居中,大屏幕需额外添加 `.large-centered`。列偏移通过 `.large-offset-*`(或 `.small-offset-*`)实现,* 表示向右移动的列数。示例展示了不同宽度和偏移量的列布局效果。

居中列
列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中,但你需要在大型设备上设置居中类.large-centered 。

实例


small-4 small-centered



small-6 small-centered



small-6 large-centered



small-8 small-centered large-uncentered



small-10 small-centered

尝试一下 »
列偏移量
可以使用 .large-offset- (或 .small-offset-) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:

实例


1

11



1

10, offset 1



1

9, offset 2



1

8, offset 3

相关文章
|
移动开发 前端开发 程序员
有哪些代码开源平台值得推荐?
开源是程序员最高的浪漫
|
12月前
|
编解码 人工智能 自然语言处理
Ruyi:图森未来推出的图生视频大模型,支持多分辨率、多时长视频生成,具备运动幅度和镜头控制等功能
Ruyi是图森未来推出的图生视频大模型,专为消费级显卡设计,支持多分辨率、多时长视频生成,具备首帧、首尾帧控制、运动幅度控制和镜头控制等特性。Ruyi基于DiT架构,能够降低动漫和游戏内容的开发周期和成本,是ACG爱好者和创作者的理想工具。
753 33
Ruyi:图森未来推出的图生视频大模型,支持多分辨率、多时长视频生成,具备运动幅度和镜头控制等功能
|
Rust 安全 C++
系统编程的未来之战:Rust能否撼动C++的王座?
【8月更文挑战第31天】Rust与C++:现代系统编程的新选择。C++长期主导系统编程,但内存安全问题频发。Rust以安全性为核心,通过所有权和生命周期概念避免内存泄漏和野指针等问题。Rust在编译时确保内存安全,简化并发编程,其生态系统虽不及C++成熟,但发展迅速,为现代系统编程提供了新选择。未来有望看到更多Rust驱动的系统级应用。
322 1
|
安全 Java
什么是枚举?
什么是枚举?
232 2
|
12月前
一文带你封装Vue3 Echarts
一文带你封装Vue3 Echarts
1066 7
一文带你封装Vue3 Echarts
|
监控 Shell
在Shell脚本编程或命令行交互
在Shell脚本编程或命令行交互
161 3
|
Dubbo Java 应用服务中间件
💥Spring Cloud Dubbo火爆来袭!微服务通信的终极利器,你知道它有多强大吗?🔥
【8月更文挑战第29天】随着信息技术的发展,微服务架构成为企业应用开发的主流模式,而高效的微服务通信至关重要。Spring Cloud Dubbo通过整合Dubbo与Spring Cloud的优势,提供高性能RPC通信及丰富的生态支持,包括服务注册与发现、负载均衡和容错机制等,简化了服务调用管理并支持多种通信协议,提升了系统的可伸缩性和稳定性,成为微服务通信领域的优选方案。开发者仅需关注业务逻辑,而无需过多关心底层通信细节,使得Spring Cloud Dubbo在未来微服务开发中将更加受到青睐。
211 0
|
SQL 资源调度 NoSQL
实时计算 Flink版产品使用合集之使用Flink CDC SQL MongoDB Connector时,可以采取什么措施来提升数据消费速率
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
262 0
|
Java Spring
Spring中如何获取到一个Bean实例(二)?
本文作为Spring中如何获取到一个Bean实例(一)?的姊妹篇,我们 对获取bean实例的流程做一些补充说明。
441 0