Question

如果我调整浏览器的大小它的效果非常好，但是如果我从手机/平板电脑上访问它，它会加载未收集的桌面版本，并且错误地加载它。

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

还有相关的风格......

    .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 .navbar-brand {
  font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
  outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
  padding: 4px 6px;
  font-size: 16px;
  color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
  outline: 0;
}

.navbar-custom a {
  color: darken(#fff, 20%);
}

.navbar-custom .nav li a {
  -webkit-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
  outline: 0;
  color: rgba(255,255,255,.8);
  background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: 0;
  background-color: transparent;
}

.navbar-custom .nav li.active {
  outline: 0;
}

.navbar-custom .nav li.active a {
  background-color: rgba(255,255,255,.3);
}

.navbar-custom .nav li.active a:hover {
  color: #fff;
}

@media(min-width:768px) {
  .navbar-custom {
    padding: 20px 0;
    border-bottom: 0;
    letter-spacing: 1px;
    background: 0 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
  }

  .navbar-custom.top-nav-collapse {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    background: url('home/wood2.jpg') no-repeat center center fixed;  }
}

如果有任何意义，我在rails 4上使用bootstrap-sass。

谢谢！

Answer 1

Noob错误。

缺少

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

在application.html.erb。的主题部分。

：/

Answer 2

到目前为止，我唯一看到错误代码的是，您的按钮类缺少navbar-toggle collapsed类，也会替换<i class="fa fa-car"></i> with <span class="sr-only">toggle navigation</span>

您应该检查另一件事，看看css文件是否正确链接。您的bootstrap.css文件应位于index.html文件的头部。在结束</body>

之前放置你的java

<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

最佳解决方案是从getbootstrap网站编辑导航栏组件。 [这是我的笔] [1]

  [1]: http://www.bootply.com/ESP6oCWSBA

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

2 个答案: