修改CSS实现Bootstrap图标分置EasyPDF™密码管理器文本两侧

要实现一个图标在标题左侧、另一个在右侧的布局，需要同时修改HTML结构和CSS样式，具体步骤如下：

1. 修改HTML结构 #

把需要放在左侧的图标（bi-zoom-in）移到标题<h4>内部，和文本并排；同时调整portfolio-info的内部结构，让右侧图标（bi-link-45deg）独立于段落，方便布局控制：

<div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
  <img src="assets/img/passwords/pas-1.webp" class="img-fluid" alt="EasyPDF™ Password Manager Image">
  <div class="portfolio-info">
    <h4>
      <a href="assets/img/passwords/pas-1.webp" title="Click to EnLarge Image" data-gallery="portfolio-gallery-app" class="glightbox preview-link">
        <i class="bi bi-zoom-in"></i>
      </a>
      EasyPDF™ Password Manager
    </h4>
    <a href="" title="Download Demo PDF Form" class="details-link">
      <i class="bi bi-link-45deg"></i>
    </a>
    <p>Image 1</p>
  </div>
</div>

2. 调整CSS样式 #

删除原有的通用绝对定位样式，改为通过Flex布局实现标题区域的左右分布，同时保留图标的交互效果：

/* 调整portfolio-info为Flex布局，实现标题与右侧图标左右对齐 */
.portfolio .portfolio-item .portfolio-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左侧图标样式：和标题文字垂直居中，增加右侧间距 */
.portfolio .portfolio-item .portfolio-info .preview-link {
  font-size: 24px;
  color: color-mix(in srgb,var(--default-color),transparent 30%);
  transition: .3s;
  line-height: 0;
  margin-right: 10px;
}

/* 右侧图标样式：独立对齐到右侧 */
.portfolio .portfolio-item .portfolio-info .details-link {
  font-size: 24px;
  color: color-mix(in srgb,var(--default-color),transparent 30%);
  transition: .3s;
  line-height: 0;
}

/* 标题设置Flex垂直居中，适配图标高度 */
.portfolio .portfolio-item .portfolio-info h4 {
  display: flex;
  align-items: center;
  margin: 0;
}

关键说明 #

• 用Flex布局替代绝对定位，让布局更灵活且响应式更好
• 左侧图标嵌入标题后，通过align-items: center实现和文字的垂直对齐
• 保留了原有的颜色过渡效果，保证交互体验一致
• 右侧图标通过justify-content: space-between自动对齐到容器右侧

内容的提问来源于stack exchange，提问作者Boilermaker73