gpt4 book ai didi

html - Bootstrap 导航栏在移动 View 中不会缩小

转载 作者:行者123 更新时间:2023-11-28 06:08:59 27 4
gpt4 key购买 nike

它是一个 Bootstrap 代理登录页面,导航栏在桌面 View 和离线文件上正常运行。但是在在线版本中,导航栏在移动 View 中不会缩小。

Link to the inline site.

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{
position:fixed;
/*size:10px;*/
width:160pt;
height:auto;
padding-top: 10px;

}
.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 {
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;
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;
}
/*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>

最佳答案

伙计,您只是使用 Bootstrap CDN 引用进行在线查找。本代码适用于 CDN 连接。所以请链接 CDN bootstrap css 和脚本。

关于html - Bootstrap 导航栏在移动 View 中不会缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36279727/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com