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

如何为最终结果添加带有引导程序的其他图像？

谢谢

Answer 1

<div class="container">
  <div class="row">
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
  </div>
  <div class="row">
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
  </div>
  </div>

此代码应能完成工作。 Simple application of bootstrap documentation

请参见Codepen example

Answer 2

按照我对您的问题的解释，在行内使用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

如果我对问题的理解不正确，请纠正我。

Boostrap如何添加img与其他img对齐

2 个答案: