html - 尽管主体容器非流体，但使页脚全宽(容器流体)

Question

如何使页脚宽度覆盖浏览器窗口的整个宽度？

注意:我使用的是 Bootstrap，页脚使用“container-fluid”，但页面内容使用“container”。

实时链接: http://185.123.96.102/~kidsdrum/moneynest.co.uk/blog.html

HTML

<footer class="container-fluid" style="margin-top: 30px;"> 
  <div class="row">
    <div class="col-sm-7 footercta">
  <h4 class="bottomoffer">Sign up to access your free Jumpstart your Finances email course:</h4>
<div id="mc_embed_signup2">
    <div id="mc_embed_signup_scroll">




<div id="mlb2-2024903" class="ml-subscribe-form ml-subscribe-form-2024903">
    <div class="ml-vertical-align-center">
        <div class="subscribe-form ml-block-success" style="display:none">
            <div class="form-section">
                <h4></h4>
                <p>Success!</p>
            </div>
        </div>
        <form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/i4m1h1" data-code="i4m1h1" method="POST" target="_blank">
            <div class="subscribe-form">
                <div class="form-section">
                    <h4></h4>
                    <p></p>
                </div>
                <div class="form-section">
                    <div class="form-group ml-field-email ml-validate-required ml-validate-email">
                        <input type="email" name="fields[email]" class="form-control" placeholder="Email*" value="" id="footer-cta-input">
                    </div>
                </div>
                <input type="hidden" name="ml-submit" value="1" />
                <button type="submit" class="text-uppercase btn btn-primary btn-lg btn-bottom primary gradient-on">
                    Start Class Now
                </button>
                <button disabled="disabled" style="display: none;" type="button" class="loading gradient-on">
                    <img src="//static.mailerlite.com/images/rolling.gif" width="20" height="20" style="width: 20px; height: 20px;">
                </button>
            </div>
        </form>
        <script>
            function ml_webform_success_2024903() {
                jQuery('.ml-subscribe-form-2024903 .ml-block-success').show();
                jQuery('.ml-subscribe-form-2024903 .ml-block-form').hide();
            };
        </script>
    </div>
</div></div>
<script type="text/javascript" src="//static.mailerlite.com/js/w/webforms.js?v25"></script>


    </div> </div>
    <div class="col-sm-5 footerlinks">
    <br>
    <ul class="mylist">
          <li><a href="/">Home</a></li>
    <li><a href="/blog.html">Blog</a></li>
  <li><a href="/about.html">About</a></li>
  <li><a href="/contact.html">Contact</a></li>
    </ul>
    <ul class="mylist2">
  <li><a href="https://www.facebook.com/ukmoneynest/">Facebook</a></li>
  <li><a href="https://twitter.com/ukmoneynest">Twitter</a></li>

    </ul>
  </div>

  </div>
  <br> 
  <br>
   <div class="finalfooterlinks"><p>
  <a href="/privacy-policy.html">Privacy Policy</a> | <a href="/terms-and-conditions.html">Terms of Service</a></p>

  <p>&copy; Copyright 2015 -
<script type="text/javascript">
    now = new Date
    theYear=now.getYear()
    if (theYear < 1900)
    theYear=theYear+1900
    document.write(theYear)
</script></div>
<br>

</footer>

Answer 1

您的页脚 位于.container 中，它具有1170px 宽度。

所以你只需要把它从这里弄出来。