如何在網頁大小減少時刪除填充

我的網頁上有一個頁腳元素，它粘在頁面的底部。它有一個225px左右的邊距（這是側邊欄的大小），但是我希望刪除這個邊距，以便跨越整個頁面，只要窗口的大小減小。我正在使用一個模板，以便當窗口大小減小時，側邊欄會崩潰。我手動添加了一個餘裕，以考慮側欄寬度。如何在網頁大小減少時刪除填充

這是它的外觀時，有一個更大的窗口，如：

這是它的外觀，當你最小化窗口，在側邊欄上消失：

我的HTML代碼使用的引導jQuery的，CSS，以及其他模板的CSS和jQuery文件。我的html代碼如下：

<div class="wrapper"> 
<!--contains all the content, the navbar at the top, and the sidebar --> 
</div> 
<footer class="footer" style="margin-bottom:0px; margin-left:225px;"> 
     <div class="container-fluid well" style="margin-bottom:0px"> 
     <nav class="pull-left"> 

      <ul class="list-inline"> 
      <li class="list-inline-item"><a href="www.mcmaster.ca">Home</a></li> 
      <li class="list-inline-item"><a href="#">Testing Purposes</a></li> 
      <li class="list-inline-item"><a href="http://www.google.ca">Web Support</a></li> 
      </ul> 

     </nav> 
     <p class="pull-right"> 
      &copy; 2017 <a href="www.mcmaster.ca">Sample Copyright</a> 
     </p> 
     </div> 
    </footer>

來源

2017-04-26 Muhammad

使用媒體查詢 –

嘗試使用樣式表並沒有內嵌的CSS，所以以後你可以很容易地使用媒體查詢。 @AndyHolmes +1 –

爲了擴展它們，這裏有一些文檔。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Kramb

媒體查詢是你的朋友。據我瞭解，您目前正在嘗試調整桌面css的移動版本。這將導致這個查詢。

@media (min-width: 992px) { 
    .footer { 
     margin-left: 0; 
    } 
}

但是，移動的第一種方法是從較小的屏幕開始，只爲大屏幕添加邊距。

.footer { 
    margin-left: 0; 
} 

@media (min-width: 992px) { 
    .footer { 
     margin-left: 225px; 
    } 
}

來源

2017-04-26 15:59:01

如何在網頁大小減少時刪除填充

回答

相關問題