1.布局容器
●container 类⽤于固定宽度并⽀持响应式布局的容器
●行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
<div class="container"> ... </div>
- container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器
2.栅格网格系统
列组合
<div class="container"> <div class="row"> <div class="col-md-4">4列</div> <div class="col-md-8">8列</div> </div> </div>
列偏移
<div class="container"> <div class="row"> <div class="col-md-1">1列</div> <div class="col-md-1">2列</div> <div class="col-md-1 col-md-offset-8">11列</div> <div class="col-md-1">12列</div> </div> </div>
列排序
我们看到：col-sm-9排在前面，那我想把col-sm-3排在前面怎么弄呢？
我们可以把col-sm-9往右推3格，把col-sm-3往左拉 9格！
这里说一下，我们往右推移了9，但也要往左拉，不然你会看到：
我们已经让其往右推了，但是col-sm-3没有往左拉，所以依然会在最右边！
最后我们看：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列排序</title> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/bootstrap.min.js"></script> </head> <style type="text/css"> div{ border-style: solid; border-width: 1px; border-color: #ccc; } </style> <body> <p style="text-align: center;font-size: 30px">栏格布局-列排序</p> <div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3">col-sm-9</div> <div class="col-md-3 col-md-pull-9">col-sm-3</div> </div> </div> </body> </html>
运行结果
![123. [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战：新闻阅读应用侧边栏布局 基础篇](https://ucc.alicdn.com/f7blgaeddhq3u/developer-article1666858/20250612/41c2b56e03254566927b9deba9b87c5a.webp?x-oss-process=image/format,webp/resize,h_160,m_lfit)
![124.[HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战：新闻阅读应用侧边栏布局 进阶篇](https://ucc.alicdn.com/f7blgaeddhq3u/developer-article1666859/20250612/5ef9413e123a466aabc71aabef3bcc7c.webp?x-oss-process=image/format,webp/resize,h_160,m_lfit)