给定HTML结构下如何实现标题div与下方卡片垂直顶部对齐

实现方案 #

方案1：调整HTML结构（推荐，符合Bootstrap栅格规范） #

你当前的标题和卡片分属两个独立的row容器，同时卡片容器自带margin-top:25px的下偏移、justify-content: center的居中属性，是导致对齐异常的核心原因。将标题和卡片合并到同一行布局即可实现对齐，修改后代码如下：

<div class="container">
  <!-- 标题和卡片放在同一外层row，设置顶部对齐 -->
  <div class="row align-items-start g-4">
    <!-- 标题列，可根据设计调整栅格占比 -->
    <div class="col-lg-3 col-md-3">
      <div class="news-title">
        <h3 class="title">NEWS & ARTICLES</h3>
      </div>
    </div>
    <!-- 卡片容器列 -->
    <div class="col-lg-9 col-md-9">
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col resize-card">
          <div class="card-img-wrap h-100">
            <img src="SiteAssets/assets/igomd/images/news-1.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h4 class="card-title">KIOSK</h4>
            </div>
          </div>
        </div>
        <div class="col resize-card">
          <div class="card-img-wrap h-100">
            <img src="SiteAssets/assets/igomd/images/news-2.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h4 class="card-title">LOREM</h4>                               
            </div>
          </div>
        </div>
        <div class="col resize-card">
          <div class="card-img-wrap h-100">
            <img src="SiteAssets/assets/igomd/images/news-3.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h4 class="card-title">IPSUM</h4>                               
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

额外添加1行CSS清除标题默认边距即可：

.news-title .title {
  margin: 0;
}

方案2：不修改HTML结构的兼容方案 #

如果无法调整现有HTML结构，直接添加以下CSS即可修复对齐问题：

/* 移除卡片行的顶部偏移和居中属性 */
.row.row-cols-1.row-cols-md-3.g-4[style*="margin-top: 25px"] {
  margin-top: 0 !important;
  justify-content: flex-start !important;
}
/* 清除标题默认内外边距避免偏移 */
.news-title .title {
  margin: 0 0 25px 0;
  padding: 0;
}

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