HTML/CSS图像重叠

当浏览器窗口调整大小时，我遇到了底部两个图像周围/彼此之间移动的问题。有谁能帮我一个忙吗？ https://jsfiddle.net/z0g3rp57/HTML/CSS图像重叠

这是我的该部分的页脚代码。

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

来源

2016-03-02 Tremors

只是一个快速的提示，就没有必要来定义的列数的每个大小，如果他们每个相同。您只需定义“xs”，其余断点将自动使用相同的列大小。 – APAD1

小提琴缺失，因此很难说发生了什么图像，但会不会是你只需要到img-responsive类添加到他们吗？

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

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

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

来源

2016-03-02 20:39:33 coopersita

他们只是小型社交媒体图标（32像素）。当我调整浏览器的大小时，他们会移动。就像“instagram”徽标在页面大小调整并且Facebook保持放置时一样，它会在整个页面上来回移动。 – Tremors

如果它们是1列，那么如果调整大小以适应手机尺寸，则列宽可以小至20px。你尝试添加'img-responsive'类吗？ – coopersita

是的，没有什么区别。 – Tremors

你已经把margin-left:100px facebook的图标。

它重叠，因为列的大小对于图片和边距太小。尝试去除余裕。

.facebook { 
    margin-top: 22px; 
}

如果窗口太小，图像可能会重叠。所以尝试放大colomn。在为例，通过col-xs-2更换col-xs-1：

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

来源

2016-03-02 21:41:36 Garric15

HTML/CSS图像重叠

回答

相关问题