Html 引导页脚不能覆盖页面的整个宽度

Html 引导页脚不能覆盖页面的整个宽度,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我的页脚无法覆盖整页。在超大屏幕上也可以,但当我在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

我的页脚无法覆盖整页。在超大屏幕上也可以,但当我在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>

接触
联系

9416马里兰州罗穆卢斯巴里博士

703-517-0030

hellochrisyou@gmail.com

社会化媒体
流行链接


Chris You

软件开发人员

您好!我是克里斯。我是一个非常热情的软件开发人员,总部位于密歇根州底特律。积极主动地编写干净有效的代码。我专攻爪哇,C,C++。请随时与我联系



Chris You

软件开发人员

您好!我是克里斯。我是一个非常热情的软件开发人员,总部位于密歇根州底特律。积极主动地编写干净有效的代码。我专攻爪哇,C,C++。请随时与我联系


将这些规则添加到html和正文css标记中

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

将这些规则添加到html和正文css标记中

max-width: 100%;
overflow-x: hidden;
如果您使用的是引导 确保您的容器类为.container fluid 如果body容器仅为.container,则可以将footer类的单独容器设置为.container fluid,并使其style=“padding:0;margin:0”

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

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


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

html编码。。。。。。
html编码。。。。。。。
如果您正在使用引导 确保您的容器类为.container fluid 如果body容器仅为.container,则可以将footer类的单独容器设置为.container fluid,并使其style=“padding:0;margin:0”

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

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


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

html编码。。。。。。
html编码。。。。。。。

如果你能为它制作一把小提琴并与他人分享,那就容易多了。谢谢请注意,如果您能为
创建一个提琴并与他人分享,您在
中有一个打字错误会容易得多。谢谢请注意,
中有一个输入错误,您是要解释您的答案,还是我们必须玩一个发现差异的游戏?您是要解释您的答案,还是我们必须玩一个发现差异的游戏?