Question

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

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

图像位置错误，你能帮我看一下我的代码吗？

＆＃13;

dependencies {    
 compileOnly "org.projectlombok:lombok:1.16.18" 
}

＆＃13;

Answer 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>

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

1 个答案: