Bootstrap 网格溢出图像

Posted 2023-03-06

【中文标题】Bootstrap 网格溢出图像

【英文标题】：Bootstrap grid overflow with images

【发布时间】：2018-06-26 07:01:13

【问题描述】：

我正在尝试使用引导网格布局来获取此图片库：

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

这是我的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>
    

这段代码的结果是这样的：

如果能帮助我将 Stranger Things 图片放在两张小图片的底部，我将不胜感激 :)

【参考方案1】：

如果你只是交换定位和包装器，你应该能够得到你想要的效果

此外，您还必须考虑所需的内边距和宽度，因为它们会影响元素的定位。

由于尺寸原因，Demo 可以全屏显示

.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%;

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

【参考方案2】：

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

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

【讨论】：

还将no-gutters 类添加到外行。

【参考方案3】：

您的标记与您想要的布局不匹配。应该是这样的：

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

还在 nopadding 中添加 overflow:hidden。 希望对您有所帮助！