Bootstrap网格溢出图像

Question

我正在尝试使用引导网格布局来实现此图库：

但是我不能将第二行的最后一张图像溢出到第一行......

这是我的HTML代码：

.gal-container {
    display: block;
    width: 100%;
    padding: 16px;
}
    
.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}
    
.box {
    padding: 32px;
}
    
.row img {
    max-width: 100%;
    max-height: 100%;
}

<section>
    <div class="gal-container">
        <div class="box">
            <div class="row">
                <div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
                <div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
                <div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
            </div>
            <div class="row">
                <div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
                <div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
                <div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
            </div>
        </div>
    </div>
</section>
    

此代码的结果如下：

我很感激帮助将陌生人的事物形象放在两张小图片的底部：）

Answer 1

这绝对没有自定义css，只需使用本机Bootstrap 4类就可以用更少的代码完成工作：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<section class="container">
    <div class="row no-gutters">
        <div class="col-sm-6">
            <div class="row no-gutters">
                <div class="col-12"><img src="img/image1.jpg"></div>
                <div class="col-sm-6"><img src="img/image2.jpg"></div>
                <div class="col-sm-6"><img src="img/image3.jpg"></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row no-gutters">
                <div class="col-sm-6"><img src="img/image4.jpg"></div>
                <div class="col-sm-6"><img src="img/image5.jpg"></div>
                <div class="col"><img src="img/image6.jpg"></div>
            </div>
        </div>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您只需更换定位和包装，您应该能够获得所需的效果

此外，您必须考虑所需的填充和宽度，因为它们会影响元素的位置。

演示由于尺寸

而全屏运行

＆＃13;

＆＃13;

.gal-container {
  display: block;
  width: 600px;
  padding: 16px;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.box {
  padding: 30px;
}

.row img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
  <div class="row">
    <div class="col-sm-6 nopadding">
      <div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
    </div>

    <div class="col-sm-6 nopadding">
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
      <div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的标记不符合您所需的布局。它应该是这样的：

var array = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
    [zero, one] = array,
    { 3: three, 10: ten } = array;
    
console.log(zero);
console.log(one);
console.log(three);
console.log(ten);

在nopadding中添加<div class="box"> <div class="row"> <div class="col-sm-6 nopadding"> <div class="col-sm-12 nopadding"> <img src="img/image1.jpg"> </div> <div class="row"> <div class="col-sm-6 nopadding"> <img src="img/image2.jpg"> </div> <div class="col-sm-6 nopadding"> <img src="img/image3.jpg"> </div> </div> </div> <div class="col-sm-6 nopadding"> <div class="col-sm-12 nopadding"> <img src="img/image4.jpg"> </div> <div class="row"> <div class="col-sm-6 nopadding"> <img src="img/image5.jpg"> </div> <div class="col-sm-6 nopadding"> <img src="img/image6.jpg"> </div> </div> </div> </div> </div> 。 希望它有所帮助！