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圖像重疊

回答

相關問題