html - Bootstrap 4：移动和全屏尺寸的垂直线

Question

它目前的外观： 它应该是什么样子：

我正在尝试为我的网站构建一个模块，但在放置垂直 hr 时遇到问题，该垂直 hr 应该在顶部和底部有一种淡入淡出。

x = 一些带有以下标题的图像，I = 垂直 hr

移动的：

| x 我 x |
| x 我 x |
| x |

全屏：
“| x I x I x I x I x |”

我当前的 html 文件（目前不使用任何 scss、css 等）。这 {{ 。}} 部分来自我正在使用并表示文本的 hugo 框架。我目前删除了放置垂直线的所有尝试。希望有人可以帮助我解决我的问题。

{{ $file := index $.Site.Data (.Get "folder") (.Get "file") }}
<section class="five-icon">
   <div class="container">
     <h2 class="text-center mb-3">{{ $file.title }}</h2>
     <div class="row text-center d-flex justify-content-center">
      {{ range $file.images}}
        <div class=" col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6">
	<img class="img-fluid" src="{{ .img_path }}" alt="{{ .img_alt }}" title="{{ .img_title }}">
	<div class="mt-3">
	  <b class="text-center bold c-white">{{ .title_bold }} </b>
	  <p class="text-center c-white" style="hyphens: auto;">{{ .title }}</p>
	</div>
        </div>
      {{end}}
      </div>
    </div>
</section>

标签： htmlcssbootstrap-4