小编Chr*_*own的帖子

Bootstrap导航栏崩溃无法在移动设备上运行

如果我调整浏览器的大小它运行得很好,但是如果我从手机/平板电脑上访问它,它会加载未折叠的桌面版本,并且不正确.

我的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)

html twitter-bootstrap twitter-bootstrap-3

2
推荐指数
1
解决办法
8646
查看次数