如何在Hugo的vex-hugo主题中实现h4标题与图标横向并排且不破坏原有布局

解决方案 #

推荐使用Flex布局实现需求，完全保留原主题响应式对齐逻辑，还可以灵活调整间距，以下是具体修改方案：

方案1：直接修改模板代码（推荐，复用主题自带Bootstrap类，无额外CSS）

原模板里图标和标题为平级元素，新增一层flex容器包裹二者即可，修改后代码如下：

<div class="col-md-4">
  {{ range .left_side }}
  <div class="mb-40 text-center text-md-left">
    <!-- flex容器：垂直居中+响应式对齐 -->
    <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2">
      <!-- mr-* 控制图标和标题的间距，数值1-5可调 -->
      <i class="d-inline-block h2 {{ .icon }} mr-2"></i>
      <h4 class="font-weight-bold m-0">{{ .title | markdownify }}</h4>
    </div>
    <p>{{ .content | markdownify }}</p>
  </div>
  {{ end }}
</div>

修改说明：

• 新增的flex容器使用Bootstrap原生工具类，无需额外写CSS
• justify-content-center justify-content-md-start 完全匹配原主题的响应式逻辑：移动端整体居中，桌面端左对齐，不会破坏原有排版
• 图标后的mr-2控制二者间距，需要更大间距可以换成mr-3/mr-4，也可以直接写style="margin-right: 12px"自定义数值
• 移除了原图标和标题上多余的下外边距，统一将下间距放到flex容器上，和原有排版间距一致

方案2：不修改模板，仅加自定义CSS

如果不想改动Hugo模板结构，可以直接在主题的自定义CSS文件中添加以下代码：

/* 给外层的mb-40容器加自定义类名feature-item，也可以直接用原有的类选择器 */
.mb-40.text-center.text-md-left i,
.mb-40.text-center.text-md-left h4 {
  display: inline-block;
  vertical-align: middle;
}
.mb-40.text-center.text-md-left i {
  margin-right: 8px; /* 自定义图标和标题的间距 */
}
/* 移动端适配，保持原有居中效果 */
@media (max-width: 767.98px) {
  .mb-40.text-center.text-md-left i,
  .mb-40.text-center.text-md-left h4 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .mb-40.text-center.text-md-left i {
    margin-bottom: 8px;
  }
}

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