六一的部落格


关关难过关关过,前路漫漫亦灿灿。




说明

容器

当前导航栏和最近发布有重叠

以最近发布为例


添加容器

默认情况下,容器都有填充左右内边距

1<div class="container">
2  <!-- 最近发布逻辑 -->
3</div>

为容器填充内边距

  1. p-5 的效果好于 pt-5
    1<div class="container p-5">
    2  <!-- 最近发布逻辑 -->
    3</div>
  2. 同时使用 my-5

    内边距更宽
    1<div class="container p-5 my-5">
    2  <!-- 最近发布逻辑 -->
    3</div>
  3. 设置边框
    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>

Bootstrap 5 - 容器



说明

容器

当前导航栏和最近发布有重叠

以最近发布为例


添加容器

默认情况下,容器都有填充左右内边距

1<div class="container">
2  <!-- 最近发布逻辑 -->
3</div>

为容器填充内边距

  1. p-5 的效果好于 pt-5
    1<div class="container p-5">
    2  <!-- 最近发布逻辑 -->
    3</div>
  2. 同时使用 my-5

    内边距更宽
    1<div class="container p-5 my-5">
    2  <!-- 最近发布逻辑 -->
    3</div>
  3. 设置边框
    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>