Bootstrap 5 - 网格系统
2023年11月15日 2024年2月13日
说明
一共12列
不需要按行划分, 代码中的先后位置决定了行序
例子
col-md用来描述桌面显示器, 注意到列数和为12
可以同时给出其他设备这三项的组合方式
1<!DOCTYPE html> 2<html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> 7 <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> 8 </head> 9 10 <body> 11 <div class="container-fluid mt-3"> 12 <div class="row"> 13 <div class="col-md-3 bg-primary text-white"> 14 <!-- 侧边栏 --> 15 </div> 16 17 <div class="col-md-6 bg-dark text-white"> 18 <!-- 正文 --> 19 20 <!-- 导航 --> 21 </div> 22 23 <div class="col-md-3 bg-info text-white"> 24 <!-- 文章大纲 --> 25 </div> 26 </div> 27 </div> 28 </body> 29</html>
