0
ブートストラップ代理店のランディングページです。デスクトップビューとオフラインに保存されているファイルのナビゲーションバーは正しく機能します。 しかし、オンライン版では、モバイルビューに入るとナビゲーションバーが縮小しません。モバイルビューでブートストラップナビゲーションバーが縮小しない
This is how the navbar should work in mobile view
ナビゲーションバーコード：
.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>
彼はiframeを使って作業しています。コードをよく見ていたら、おそらくそれを見たことがあります。そして、彼はBS cssとjs ）。 – Tonsenson
ちょうど男mもBSコードを使用するだけではCDNのリファレンスを使用しないと言っています。直接cssとjsファイルではありません。ここのnはiframeではありません。 – Shadow