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

Question

我的网页上有一个页脚元素，它粘在页面底部。它有一个225px的左边距（这是侧边栏的大小）但是我希望删除这个边距，以便在窗口大小减小时跨越整个页面。我使用模板，以便当窗口大小减小时，侧边栏会折叠。我手动添加了一个边距，以考虑侧边栏宽度。

当有更大的窗口时，它就是这样的：

当侧边栏消失时，当您最小化窗口时，它的外观如下：

我的html代码使用bootstrap 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>

Answer 1

媒体查询是你的朋友。据我了解，您目前正在尝试将桌面css用于移动版本。这将导致此查询。

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

然而，移动第一种方法是从较小的屏幕开始，只为大屏幕添加边距。

.footer {
    margin-left: 0;
}

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