在引导网格布局中组织图像答案

【问题标题】：Organizing images in the bootstrap grid layout在引导网格布局中组织图像
【发布时间】：2017-11-29 20:12:19
【问题描述】：

大家好，我在使用引导网格布局组织一组图像时需要帮助。在图像中有我想要达到的结果：https://i.stack.imgur.com/RuJud.png

我的代码产生这个结果：https://i.stack.imgur.com/ZDa2Z.png

图片的位置不对，你能帮我看看我的代码吗？

<div class="container">
  <div class="row game-group-titles">

    <div class="col-md-6">

      <h4>GIOCHI PREFERITI</h4>

      <div class="row">
        <div class="col-md-12 giocogrosso">
          <img src="../lggioco.png" alt="">
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 giocopiccoloo">
          <img src="../giocoo.png" alt="">
        </div>
        <div class="col-md-6 giocopiccolo">
          <img src="../giocoo.png" alt="">
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 giocopiccoloo">
          <img src="../giocoo.png" alt="">
        </div>
        <div class="col-md-6 giocopiccolo">
          <img src="../giocoo.png" alt="">
        </div>
      </div>

    </div>
    <div class="col-md-6">

      <h4>CURRENTLY PLAYING</h4>

      <div class="row">
        <div class="col-md-12 giocogrosso">
          <img src="../lggioco.png" alt="">
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 giocopiccoloo">
          <img src="../giocoo.png" alt="">
        </div>
        <div class="col-md-6 giocopiccolo">
          <img src="../giocoo.png" alt="">
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 giocopiccoloo">
          <img src="../giocoo.png" alt="">
        </div>
        <div class="col-md-6 giocopiccolo">
          <img src="../giocoo.png" alt="">
        </div>
      </div>

    </div>
  </div>
</div>

【问题讨论】：

确保您没有对图像应用任何边距或填充。

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

不确定这是否是您要找的

   
.row {
  background: blue;
  max-width: 410px;
}
.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col, > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

<h4>GIOCHI PREFERITI</h4>
<div class="row no-gutters">
  <div class="col-12 giocogrosso">
    <img src="http://via.placeholder.com/410x190" alt="">
  </div>
  <div class="col-xs-6 giocopiccoloo">
    <img src="http://via.placeholder.com/205x95" alt="">
  </div>
  <div class="col-xs-6 giocopiccoloo">
    <img src="http://via.placeholder.com/205x95" alt="">
  </div>
  <div class="col-xs-6 giocopiccoloo">
    <img src="http://via.placeholder.com/205x95" alt="">
  </div>
  <div class="col-xs-6 giocopiccolo">
    <img src="http://via.placeholder.com/205x95" alt="">
  </div>
</div>

【讨论】：