如何使用Bootstrap在HTML中实现菱形排列的行列布局

DevOps 小满

2026-9-28

你使用的是Bootstrap框架，要实现多logo卡片网格效果，只需要补全卡片结构+增加自定义样式即可，以下是可直接运行的实现代码：

1. 完整HTML代码

<div class="logos card-deck row m-auto d-flex align-items-center justify-content-center gap-3 py-4">
  <div class="card cardLogos col-lg-2 col-md-3 col-sm-4 col-6">
    <div class="cardTitle d-flex align-items-center justify-content-center p-4">
      <a href="#" target="_blank">
        <img data-aos="fade-up" src="assets/images/hostinger.svg" width="64px" alt="Hostinger">
      </a>
    </div>
  </div>
  <!-- 按设计稿需要的logo数量复制上面的card节点即可 -->
  <div class="card cardLogos col-lg-2 col-md-3 col-sm-4 col-6">
    <div class="cardTitle d-flex align-items-center justify-content-center p-4">
      <a href="#" target="_blank">
        <img data-aos="fade-up" src="assets/images/xxx.svg" width="64px" alt="对应logo名称">
      </a>
    </div>
  </div>
</div>

这里修正了你代码里写错的d-flex类名，同时调整了列宽参数保证不同屏幕尺寸下的展示效果更合理，你可以根据实际设计稿调整col的数值

2. 自定义CSS样式

.cardLogos {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  cursor: pointer;
}
.cardLogos:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.cardLogos img {
  transition: all 0.3s ease;
}
.cardLogos:hover img {
  transform: scale(1.05);
}

上面的CSS实现了：