如果我调整浏览器的大小它运行得很好,但是如果我从手机/平板电脑上访问它,它会加载未折叠的桌面版本,并且不正确.
我的HTML有什么问题吗?
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="/">
<i class="fa fa-car"></i> <span class="light">Title</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Run Code Online (Sandbox Code Playgroud)
继承了相关的风格......
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
@media(max-width: $screen-xs-max) {
background-color: #000;
}
}
.navbar-custom …Run Code Online (Sandbox Code Playgroud)