Question

当浏览器窗口调整大小时，我发现底部两个图像在彼此之间/彼此之间移动存在问题。有人能帮我一把吗？ https://jsfiddle.net/z0g3rp57/

以下是该部分的页脚代码。

<div class="footer">
       <div class="container-fluid">
            <div class="row">
                 <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
                 <a href="https://www.facebook.com/nrthrntwns"><img src="facebook.png" width="38" height="38" alt="" border="0" class="facebook"></a>
                 </div>
                 <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
                 <a href="https://www.instagram.com/nrthrntwns/"><img src="instagram.png" width="33" height="33" alt="" border="0" class="instagram"></a>
                 </div>
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                 </div>
                 <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                 </div>
                 <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                 </div>
            </div>
       </div>
  </div>

和我的CSS

/* Footer */

.footer {
  height: 75px;
  background: rgba(0,0,0,.25);
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  padding: irem;
 }

.footer h4 {
 font-family: Arial;
 font-size 18px;
 text-align: right;
 padding-right: 50px;
 margin-top: 5px;
  }
.facebook {
margin-top: 22px;
margin-left: 100px;
 }

.instagram {
margin-top: 25px;
margin-right: 50px;
}

Answer 1

小提琴缺少图像，所以很难说出发生了什么，但是你只需要将img-responsive类添加到它们中吗？

<img src="..." class="img-responsive" alt="Responsive image">

默认情况下，Bootstrap不会使图像响应。

Bootstrap参考：http://getbootstrap.com/css/#images

Answer 2

您已将margin-left:100px添加到Facebook图标中。

它重叠，因为列的大小对于图片和边距而言太小。尝试删除左边距。

.facebook {
    margin-top: 22px;
}

如果窗口太小，图像可能会再次重叠。所以试着扩大colomn。例如，将col-xs-1替换为col-xs-2：

<div class="col-xs-2">
    <a href="https://www.facebook.com/nrthrntwns"><img src="facebook.png" width="38" height="38" alt="" border="0" class="facebook"></a>
</div>

HTML / CSS图像重叠

2 个答案: