Bootstrap/CSS如何将多个小图片叠加放置在底层长托盘背景图上方

解决方案 #

你当前的问题源于页面结构设计错误：托盘图片和6个图标被设为同级元素放在flex横向布局容器内，默认会并排展示，并非Bootstrap和自定义CSS冲突，按照以下方式修改即可实现预期效果：

1. 修改HTML结构

将所有图标放入托盘所在的父容器内，新增包裹图标的容器节点：

<div class="d-flex flex-row mt-2">
  <!-- 托盘父容器，添加自定义类tray-container -->
  <div class="tray-container">
    <!-- 托盘底图 -->
    <img class="tray" src="../../../assets/images/Generals/Icon_1.png" alt="">
    <!-- 新增图标包裹容器 -->
    <div class="tray-icons-wrapper">
      <img class="tray-icon" src="../../../assets/images/Generals/Icon_2.png" alt="">
      <img class="tray-icon" src="../../../assets/images/Generals/Icon_3.png" alt="">
      <img class="tray-icon" src="../../../assets/images/Generals/Icon_4.png" alt="">
      <img class="tray-icon" src="../../../assets/images/Generals/Icon_5.png" alt="">
      <img class="tray-icon" src="../../../assets/images/Generals/Icon_6.png" alt="">
      <img class="tray-icon" src="../../../assets/images/Generals/Icon_7.png" alt="">
    </div>
  </div>
</div>

2. 替换自定义CSS代码

/* 托盘父容器设为相对定位，作为子元素绝对定位的基准 */
.tray-container {
  position: relative;
  /* 可根据实际需求调整宽度，比如固定宽度或者继承父级宽度 */
  width: 100%;
}

.tray {
  width: 100%;
  display: block; /* 消除图片默认下方空白 */
}

/* 图标包裹容器设为绝对定位，铺满整个托盘区域 */
.tray-icons-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 弹性布局让图标水平均匀分布、垂直居中 */
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* 可根据实际图标大小调整左右内边距，避免图标贴到托盘边缘 */
  padding: 0 10px;
  box-sizing: border-box;
}

.tray-icon {
  /* 调整为你需要的图标大小 */
  width: 40px;
  transition: transform .2s; 
}

.tray-icon:hover {
  transform: scale(1.5); 
}

调整说明

如果图标大小或者间距不符合预期，只需要调整.tray-icon的width属性，以及.tray-icons-wrapper的justify-content属性（如果需要调整间距可以换成space-evenly或者自定义gap值）即可，该方案不会和Bootstrap原生样式产生冲突。

内容的提问来源于stack exchange，提问作者The Grumpy Lion