Bootstrap布局问题：三大列等高且中间列子块各占图片高度50%

解决方案 #

可以直接使用Bootstrap自带的Flex布局工具类实现需求，无需额外编写复杂自定义样式，适配Bootstrap 4及以上版本，修改逻辑如下：

1. Bootstrap的row默认是Flex布局，自带align-items: stretch属性，因此三个列默认就会保持等高，高度由高度最高的列（这里由左侧图片高度决定）统一撑开
2. 给中间的.col-3列添加d-flex flex-column类，让其内部元素垂直方向排列
3. 给中间列的两个文本块添加flex-grow-1 flex-basis-0类，即可实现两个块平分中间列的全部高度，刚好各占左侧图片高度的50%，如果文本内容超出高度，可以加overflow-auto让内容滚动，避免撑破布局
4. 左侧图片列如果是img标签插入图片，给img添加w-100 h-100 object-fit-cover类，保证图片响应式且完全填充列高度；如果是背景图实现，给.img-background添加如下样式即可：

.img-background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

修改后的完整代码如下：

<section id="puissance-1">
  <div class="container-fluid">
    <div class="row">
      <!-- 左侧图片列 -->
      <div class="col img-background">
        <!-- 如果你是用img标签放图片，写法如下 -->
        <!-- <img src="你的图片地址" alt="展示图" class="w-100 h-100 object-fit-cover"> -->
      </div>
      <!-- 中间双文本块列 -->
      <div class="col-3 p-0 d-flex flex-column">
        <div class="bg-blanc color-gris-fonce p-5 flex-grow-1 flex-basis-0 overflow-auto">
          <p>Aquademy的创新产品系列重新定义了水、光线和香氛的使用方式。嵌入珍贵材质的淋浴系统已经成为艺术作品，我们选用AISI 316L钢制作装饰面板，即使是在腐蚀性最强的环境中也可以正常使用。高品质硅胶喷嘴，水雾喷射被水流瀑布包裹。</p>
        </div>
        <div class="bg-bleu color-blanc p-5 flex-grow-1 flex-basis-0 overflow-auto">
          <p>色彩疗法系列的体验更加沉浸，它的特点是LED射灯像宝石一样镶嵌在面板上。除了精致的外观，LED射灯还可以提供最佳的色调和光频率体验。</p>
        </div>
      </div>
      <!-- 右侧文本列 -->
      <div class="col bg-bleu color-blanc p-5">
        <h2>水的力量</h2>
        <p>多种多样的喷头选择让水向我们的身体展现它的无限可能。作为顶级的理疗元素，这些喷头喷出的水可以带来源源不断的全新感受，能够唤醒我们内心深处的渴望。
它们的组合带来了完美的搭配，能让我们的身体立刻获得益处。
水可以平衡我们隐藏最深的能量，带来充满活力、纯粹愉悦和平和的时刻。<br><br>

雨淋式喷头<br>
饱满而舒适，给身体带来熟悉柔和的触感。<br><br>
瀑布式喷头<br>
按摩和抗压力效果，在舒适和能量之间实现完美平衡。<br><br>
喷雾式喷头<br>
包裹感强、清爽舒适，水变成雾化颗粒，和人体融为一体。<br><br>
气雾式喷头<br>
动感十足、用途广泛，这种喷头实现了水和空气的结合。除了放松肌肉之外，还可以激发创造力和身体活力。</p>
      </div>
    </div>
  </div>
</section>

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