Html 引导页脚不能覆盖页面的整个宽度
我的页脚无法覆盖整页。在超大屏幕上也可以,但当我在lg、md、sm上测试时,右边有一个边距可以向右滚动。它将屏幕的宽度扩展到大于屏幕大小(视口?)。这是我的一些代码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
<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>
接触
联系
-
-
-
-
-
流行链接
软件开发人员
您好!我是克里斯。我是一个非常热情的软件开发人员,总部位于密歇根州底特律。积极主动地编写干净有效的代码。我专攻爪哇,C,C++。请随时与我联系
软件开发人员
您好!我是克里斯。我是一个非常热情的软件开发人员,总部位于密歇根州底特律。积极主动地编写干净有效的代码。我专攻爪哇,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编码。。。。。。。
如果你能为它制作一把小提琴并与他人分享,那就容易多了。谢谢请注意,如果您能为创建一个提琴并与他人分享,您在中有一个打字错误会容易得多。谢谢请注意,中有一个输入错误,您是要解释您的答案,还是我们必须玩一个发现差异的游戏?您是要解释您的答案,还是我们必须玩一个发现差异的游戏?
社会化媒体