Bootstrap 导航栏崩溃在移动设备上不起作用

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

菜鸟错误。

不见了

<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 文件的头部。 将您的 java 放在关闭 </body>

之前

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

最好的解决方案是从 getbootstrap 网站编辑导航栏组件。 Here's my pen

Answer 3

试试 React Bootstrap

import React from 'react'
import { Navbar, Nav, NavDropdown, Container, NavbarBrand } from 'react-bootstrap'

const NavbarComponent = () => {
    return (
        <>
            <Navbar bg="light" expand="lg">
                <Container fluid>
                    <Navbar.Brand href="#">Navbar scroll</Navbar.Brand>
                    <Navbar.Toggle aria-controls="navbarScroll" />
                    <Navbar.Collapse id="navbarScroll">
                        <Nav className="me-auto my-2 my-lg-0" navbarScroll />
                        <a href="#">some link</a>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </>
    )
}

export default NavbarComponent

来源：https://react-bootstrap.netlify.app/components/navbar/#navbars