引導頁腳不會覆蓋頁面的整個寬度

Question

頁腳不能覆蓋整個頁面，我遇到了麻煩。 在超大屏幕上也可以，但是當我在lg，md，sm上測試時，右側有一個向右滾動的空白。 它擴大了屏幕的寬度，使其大於屏幕的大小（視口？）。 這是我的一些代碼。

<footer class="footer text-center" style="height:420px; margin-top:220px">
    <div class="container">
    <h1 class="text-secondary col-lg text-center col-md offset-md-1" style="margin-bottom:5%">Contact</h1>

        <div class="row" style="height:200px; margin-top:-2%">
            <div class="col-md-4 mb-5 col-lg-4 col-md" style="">
                <h4 class="text-uppercase mb-4 text-secondary"><u>Get in touch</u></h4>
                <div class="col-lg col-md" style="">
                    <p class="footer-contact text-primary text-left"><i class="fa fa-home"></i> 9416 Barry dr, Romulus, MI</p>      
                    <p class="footer-contact text-primary text-left"><i class="fa fa-phone"></i> 703-517-0030</p>       
                    <p class="footer-contact text-primary text-left"><i class="fa fa-envelope"></i> hellochrisyou@gmail.com</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-3 offset-md-2" style="background-color:#ffffff; margin-left:0.5%">
                <h4 class="text-uppercase col-lg text-secondary text-center"><u>Social Media</u></h4>
                <ul class="list-inline mb-0 footer-social"> 
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
                        <i class="fa fa-fw fa-facebook icon-margin"></i>
                        </a>
                        </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
                        <i class="fa fa-fw fa-google-plus icon-margin"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
                        <i class="fa fa-fw fa-twitter icon-margin"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
                        <i class="fa fa-fw fa-linkedin icon-margin"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
                        <i class="fa fa-fw fa-github icon-margin"></i>
                        </a>
                    </li>
                </ul>
            </div> 
            <div class="col-md-4 col-lg-4" style="margin-left:-0.5%">
                <h4 class="text-uppercase mb-4 text-secondary"><u>Popular Links</u></h4>
                <div class="container-fluid">
                    <div class="row footer-wide""> 
                        <ul class="nav navbar-nav col-lg text-center" style="margin-left:5%">
                            <li><a style="color:#d3d3d3" href="#section1">Home</a></li>
                            <li><a style="color:#d3d3d3" href="#section2">About Me</a></li>
                            <li><a style="color:#d3d3d3" href="#section3">Education</a></li>
                            <li><a style="color:#d3d3d3" href="#section4">Skills</a></li>               
                            <li><a style="color:#d3d3d3" href="#section5">Portfolio</a></li>                
                            <li><a style="color:#d3d3d3" href="#section6">Contact</a></li>                      
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

謝謝。

克里斯

編輯：

問題是，例如，當您使用100vw時，考慮了滾動條。 正如大多數人所建議的那樣，請始終將max-width用作100％，以避免任何瀏覽器滾動條。

Answer 1

將這些規則添加到html和body CSS標簽中

max-width: 100%;
overflow-x: hidden;

Answer 2

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,700" rel="stylesheet"/>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="source.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

  <!-- Navigation -->
<nav class="navbar navbar-default bg-secondary fixed-top" style="height:200px" id="mainNav" role="navigation">
  <div class="container">
    <div class="row"> 
      <p class="navbar-brand font-title col-xl-4 offset-xl-4 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-3 text-center">Chris You</p>
      </div>
        <div class="row">
            <a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section1">Home</a>
            <a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section2">About Me</a>
            <a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section3">Education</a>
            <a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section4">Skills</a>
            <a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section5">Portfolio</a>
            <a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section6">Contact</a>        
        </div>
    </div>              
</nav>

<!--image-->
<div class="row" style="margin-top:300px">
        <img class="col-xl-2 offset-xl-5 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-4" src="me.gif"> 
</div>

<!--Description-->
<div class="jumbotron jumbo-header">      
  <div class="row">
    <p class="about-title text-third text-center col-12"><strong>Software Developer</strong></p>
  </div>
    <p class="about-text text-primary text-left  col-xl-4 offset-xl-4 col-lg-7 offset-lg-3 col-md-6 offset-md-3 col-sm-8 offset-sm-2"> Hi! I'm Chris.  I am a very passionate software developer based in Detroit, MI.  Highly motivated to write clean and effective code.  I specialize in Java, C#, C++.  Feel free to contact me!</p>
</div>

Answer 3

如果您使用的是Bootstrap，則如果主體容器僅為.container，請確保您的容器類為.container-fluid，然后可以將頁腳類的單獨容器設置為.container-fluid，並將其樣式設置為“ =” padding：0“ ;余量：0"

====================

<body>
 <div class="container">
   html coding......
 </div>


 <div class="container-fluid" style="padding:0;margin:0">
  <footer>
    html coding.......
  </footer>
 </div>
</body>