css - Bootstrap 如何添加 img 与其他 img 对齐

Question

你好，我的代码有问题:

<div class="row">
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
        </div>
        <div class="row">
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
        </div>

我得到了这个结果: result bootstrap picture

我想要另一个 img 喜欢这个:

results final

如何使用 Bootstrap 添加其他图像以获得最终结果？

谢谢

Answer 1

根据我对你的问题的解释，在一行中使用 2 列并将第一列进一步分成多列是可行的。

<div id="container">
  <div class="row main">
    <div class="col-8">
      <div class="row">
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
      </div>
    </div>
    <div class="col-4">
      <img src="https://picsum.photos/300/1200" class="img-fluid" alt="">
    </div>
  </div>
</div>

演示:https://stackblitz.com/edit/js-tcjrtb

如果我对问题的理解有误，请纠正我。