Bootstrap 5 - 容器
2023年11月13日 2024年2月13日
说明
容器
当前导航栏和最近发布有重叠
以最近发布为例
添加容器
默认情况下,容器都有填充左右内边距
1<div class="container"> 2 <!-- 最近发布逻辑 --> 3</div>
为容器填充内边距
p-5
的效果好于pt-5
1<div class="container p-5"> 2 <!-- 最近发布逻辑 --> 3</div>
- 同时使用
my-5
内边距更宽
1<div class="container p-5 my-5"> 2 <!-- 最近发布逻辑 --> 3</div>
- 设置边框
1<div class="container p-5 my-5 border"> 2 <!-- 最近发布逻辑 --> 3</div>
为导航栏添加容器
1<div class="container p-5"> 2 <!-- 导航栏逻辑 --> 3</div>
为最近发布和最近更新添加容器
1<div class="container p-5 my-5 border"> 2 <!-- 最近发布逻辑 --> 3</div> 4 5<div class="container p-5 my-5 border"> 6 <!-- 最近更新逻辑 --> 7</div>
为博文添加容器
1<div id="post" class="container p-5 my-5"> 2 <article> 3 <header> 4 <h1 class="post-title">{{ .Title }}</h1> 5 </header> 6 {{.Content}} 7 </article> 8 </div> 9 10 <div class="container p-5 my-5"> 11 {{ with .NextInSection }} 12 <a href="{{ .Permalink }}">前一篇</a> 13 {{ end }} 14 {{ with .PrevInSection }} 15 <a href="{{ .Permalink }}">后一篇</a> 16 {{ end }} 17</div>