个人中心
gpt4 book ai didi

html - 滚动到页脚

转载 作者：行者123 更新时间：2023-11-28 16:50:58 27 4
gpt4 key购买 nike

我不知道是什么导致了问题，但在移动 View 中，您可以滚动到页脚。
我试图改变几件事，但我不明白为什么会这样。

我在下面添加了我的代码和屏幕截图。感谢您的关注。

enter image description here enter image description here 

     <!DOCTYPE html> <html lang="en">

 <head>

     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content=""> <link rel="shortcut icon" href"icon.png" >
     <title>PAT DECORATORS &#38; CO</title>

     <!-- Bootstrap Core CSS -->
     <link href="css/bootstrap.min.css" rel="stylesheet">

     <!-- Custom CSS -->
     <link href="css/portfolio-item.css" rel="stylesheet">

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->

     <!-- Bootstrap Core JavaScript -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css"
 rel="stylesheet">
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
     <script src="photo-gallery.js"></script>
            <link href="css/portfolio-item.css" rel="stylesheet">  <style>

     body {
     padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation
 changes. */
     background-color: #D8D2C4; /*    background: linear-gradient(#CCCC00, #B7B700,#D8D2C4);*/
     font-family: Tahoma, Geneva, sans-serif; }


      .navbar-inverse .navbar-nav > li > a:hover{   background-color: #20A6E3;   color: #fff; }

 .navbar-inverse {   border: none; }

 .navbar-inverse .navbar-brand {
     color: #fff; }

 .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav
 > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav >
 .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {  
 background-color: #20A6E3;   color: #fff; }


 .resize {
     width: 45px;
     height: 45px }

 .resize2 {
     width: 75px;
     height: 45px }

   </style>    



      </head>

 <body>

     <!-- Navigation -->
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand" href="#"> <!--                    <span><img src="icon.png" class="resize"/></span>-->
                     PAT DECORATORS </a>
             </div>

             <!-- Collect the nav links, forms, and other content for toggling -->
             <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                 <ul class="nav navbar-nav">
                      <li>
                         <a href="index.html">Home</a>
                     </li>                   
                     <li>
                         <a href="about.html">About</a>
                     </li>
                     <li>
                         <a href="services.html">Services</a>
                     </li>
                    <li class="active">
                         <a href="gallery.html">Gallery</a>
                     </li>
                                         <li>
                         <a href="testimonials.html">Testimonials</a>
                     </li>
                     <li>
                         <a href="contact.html">Contact</a>
                     </li>
                 </ul>
             </div>
             <!-- /.navbar-collapse -->
         </div>
         <!-- /.container -->
     </nav>

     <!-- Page Content -->
     <div class="container">


         <!-- Portfolio Item Heading -->
         <div class="row ">
             <div class="col-lg-12">
                 <h1 class="page-header section2">  
                     <span><img src="gallery.png" class="resize2"/></span><font>Gallery
                     <small><font color="#000"></font></small>
                 </h1>
             </div>
         </div>         <!--gallery-->      <div class="container">

         <div id="gall">
         <ul class="row">
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="car_painting.png">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/car_painting2.png">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/car_painting8.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting5.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/font_painting6.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting7.jpg">
             </li>
      <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting91.jpg">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/varnishing.PNG">
             </li>
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting4.jpg">
             <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting31.jpg">
             </li>

              <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                 <img class="img-responsive" src="gallery/painting10.png">
             </li>              


           </ul> 


         </div><!--end of gal -->

         <!-- Footer -->
         <footer class="footer2 footer">
             <div class="row">
                 <div class="col-lg-12">
                    <p>Designed by <a href="http://wonderfulwebsites.ie" target="_blank"> Wonderful
 Websites.ie</p></a> 
                 </div>
             </div>
             <!-- /.row -->
         </footer>

     </div>     </div><!--end of container -->


     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">         
           <div class="modal-body">                
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
     </div><!-- /.modal -->


     <!-- jQuery -->
     <script src="js/jquery.js"></script>

     <!-- Bootstrap Core JavaScript -->
     <script src="js/bootstrap.min.js"></script>
                <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



 </body>

 </html>

最佳答案

开始时您的 HTML 中存在一些错误。 

<h1 class="page-header section2">  
    <span><img src="gallery.png" class="resize2"/></span>
    <font>Gallery<small><font color="#000"></font></small>
</h1>

这里有一个字体标签没有正确关闭。还有一个小标签，目前我不明白它的用途。我的建议是摆脱它们。

<h1 class="page-header section2">  
    <span><img src="gallery.png" class="resize2"/></span>
    Gallery
</h1>

下一步

<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/varnishing.PNG">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting4.jpg">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting31.jpg">
</li>

您在这里缺少结束 li 标记。轻松修复，将其放回原处!

<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/varnishing.PNG">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting4.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
    <img class="img-responsive" src="gallery/painting31.jpg">
</li>

我能找到的就这些了。我没有在我制作的 Bootply 中收到错误，所以这里是 - http://www.bootply.com/7tmqQmPapS - 显然我在你的文件顶部缺少链接的 CSS 和 JS，特别是这些；

 <script src="photo-gallery.js"></script>
 <link href="css/portfolio-item.css" rel="stylesheet">

因此，可能是其中一个错误导致了您的问题。尝试将它们添加到我上面的 Bootply 中，看看会发生什么。如果您有任何进一步更新您的问题并告诉我，如果有新信息出现，我可以更新答案。

关于html - 滚动到页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32682268/

27 4 0
文章推荐： javascript - 使用 bootstrap 4 为 php 代码创建数据表
文章推荐： python - Celery periodic_task 并行运行多次
文章推荐： python - python 中的正则表达式，不确定我做错了什么
文章推荐： python - self.exit 和 self.quit 不退出 PyQt 应用程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com