Bootstrap gezinme çubuğu, mobil görünümde küçülmez

Question

Bir bootstrap ajansı açılış sayfası, Gezinme çubuğu, masaüstü görünümünde ve çevrimdışı olarak saklanan dosyalarda düzgün çalışır. Ancak çevrimiçi versiyonda gezinti çubuğu, mobil görünüme alındığında küçülmez.

This is how the navbar should work in mobile view

Navigasyon barkod

Link to the inline site.

:

.navbar-default .navbar-brand { 
 
    /*font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive; 
 
    color: #fed136;*/ 
 
} 
 
.logo{ 
 
\t position:fixed; 
 
\t /*size:10px;*/ 
 
\t width:160pt; 
 
\t height:auto; 
 
     padding-top: 10px; 
 
\t 
 
} 
 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus, 
 
.navbar-default .navbar-brand:active, 
 
.navbar-default .navbar-brand.active { 
 
    color: #fec503; 
 
    
 
} 
 

 
.navbar-default .navbar-collapse { 
 
    border-color: rgba(255,255,255,.02); 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
    order-color: #C51D1D; 
 
    background-color: #CA2222; 
 
    /*top: 31px;*/ 
 
} 
 

 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
} 
 

 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: #CA2222; 
 
} 
 
/* Drop down */ 
 
#drop li ul li { 
 
\t border-top: 0px; 
 
} 
 

 
/*Navigation text*/ 
 
.navbar-default .nav li a { 
 
    text-transform: uppercase; 
 
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-weight: 100; 
 
\t font-size:15px; 
 
    letter-spacing: 1px; 
 
    color: #fff; 
 
} 
 

 
.navbar-default .nav li a:hover, 
 
.navbar-default .nav li a:focus { 
 
    outline: 0; 
 
    color: #009DF7; 
 
} 
 

 
.navbar-default .navbar-nav>.active>a { 
 
    border-radius: 0; 
 
    color: #fff; 
 
    background-color: rgba(255, 0, 0, 0.66); 
 
} 
 

 
.navbar-default .navbar-nav>.active>a:hover, 
 
.navbar-default .navbar-nav>.active>a:focus { 
 
    color: #fff; 
 
    background-color: rgba(255, 0, 0, 0.66); 
 
    padding-top: 15px; 
 
} 
 

 
@media(min-width:768px) { 
 
    .navbar-default { 
 
     padding: 25px 0; 
 
     border: 0; 
 
     background-color: transparent; 
 
     -webkit-transition: padding .3s; 
 
     -moz-transition: padding .3s; 
 
     transition: padding .3s; 
 
    } 
 

 
    .navbar-default .navbar-brand { 
 
     font-size: 2em; 
 
     -webkit-transition: all .3s; 
 
     -moz-transition: all .3s; 
 
     transition: all .3s; 
 
    } 
 

 
    .navbar-default .navbar-nav>.active>a { 
 
     border-radius: 3px; 
 
    } 
 
\t /*navigation color*/ 
 
    .navbar-default.navbar-shrink { 
 
     padding: 3px; 
 
     background-color: rgba(0, 0, 0, 0.57); 
 
    } 
 

 
    .navbar-default.navbar-shrink .navbar-brand { 
 
     font-size: 2em; 
 
    }

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header page-scroll"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
        <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 page-scroll" href="#page-top"><img class="logo" width="80%" src="img/logos/U2.png" style=" 
 
    margin-top: -22px; 
 
"></a> 
 
      </div> 
 

 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 0px;"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="hidden active"> 
 
         <a href="#page-top"></a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="#services">Tandem skydiving</a> 
 
         
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="#learn">Learn to skydive</a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="#hubs">microlite and paragliding</a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="#book">BOOK NOW</a> 
 
        </li> 
 
        <li class=""> 
 
         <a class="page-scroll" href="#socialmedia">About us</a> 
 
        </li> 
 
        <!--<li> 
 
         <a class="page-scroll" href="#team">Team</a> 
 
        </li> 
 
        <li> 
 
         <a class="page-scroll" href="#contactus">connect</a> 
 
        </li>--> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav>

Answer 1

Adam sadece çevrimiçi arama için Bootstrap CDN başvuru kullanın. Bu Kod CDN bağlantısı ile çalışıyor. Bu yüzden lütfen CDN bootstrap css ve script'i bağlayınız.

Answer 2

Bu sayfadaki sorun http://iloveskydiving.in/coco, meta görünüm noktasını kaçırıyor olmanızdır.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

bu sayfaya bakarken: http://sky.promile.co/coco/ ("orijinal" bir, iframe içeriğini çeker yerde) düzgün şekilde çalışıyorsa. Meta etiketi de ilk sayfanın koduna eklemeniz gerekir. (neden bu arada bir iframe kullanmalıyım?)