如何在网页大小减少时删除填充

我的网页上有一个页脚元素，它粘在页面的底部。它有一个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

如何在网页大小减少时删除填充

回答

相关问题