热门课程 - 发现知识之美

Bootstrap 5 完整教程

作者: 王老师 更新: 2025-11-26 阅读: 难度: 高级
学习工具

. 网格系统

Bootstrap 的网格系统是基于 flexbox 构建的,支持12列布局。

响应式断点

网格系统示例
<div class="container"> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">列1</h5> <p class="card-text">在中等屏幕上占4列</p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">列2</h5> <p class="card-text">在中等屏幕上占4列</p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">列3</h5> <p class="card-text">在中等屏幕上占4列</p> </div> </div> </div> </div> </div>
提示: 这是一个重要的概念,需要特别注意理解和掌握。
注意: 这是一个常见的错误点,请避免犯同样的错误。

评论

登录 后发表评论