Question

我是Bootstrap的新手，我正在尝试创建其中一个可折叠的导航菜单，当检测到小屏幕时，这些菜单会有三条小线。当屏幕很大时，菜单会显示，但是当菜单很小时菜单会消失。

HTML：

  <nav class="navbar">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-targert="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <div><!--end navbar header-->
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div><!--end myNavbar-->
    </div><!--end container-->
  </nav><!--end nav-->

  <div class="container">
      <div class="row">
        <div class="col-sm-4"><p style="background-color: yellow">This is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some text</p></div>
        <div class="col-sm-8"><p style="background-color: yellow">This is some text</p></div>
      </div><!--end row-->
  </div><!--end container-->

CSS：

来自：<link rel="stylesheet" href="css/bootstrap.css">，这是默认供应商。

Answer 1

Your issue.
1 data-targert="#myNavbar" (target spelling is wrong )
2 <div><!--end navbar header--> (div is not closed )
3 <nav class="navbar"> ( <nav class="navbar navbar-inverse"> or <nav class="navbar navbar-default"> )

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div><!--end navbar header-->
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div><!--end myNavbar-->
    </div><!--end container-->
  </nav><!--end nav-->

  <div class="container">
      <div class="row">
        <div class="col-sm-4"><p style="background-color: yellow">This is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some text</p></div>
        <div class="col-sm-8"><p style="background-color: yellow">This is some text</p></div>
      </div><!--end row-->
  </div><!--end container-->
</body>

＆＃13;

Answer 2

像这样指定导航栏样式：

<nav class="navbar navbar-inverse">

OR

<nav class="navbar navbar-default">

如果您想要自定义样式的导航栏，那么

HTML：

<nav class="navbar someNavbar">

CSS：

.someNavbar .navbar-toggle {
    background-color: #FFF; /* change color accordingly */
}
.someNavbar .icon-bar {
    background-color: #000; /* change color accordingly */
}

Q值。上面的课程是什么？

navbar-toggle 是主按钮

icon-bar 是那些

行

此外，请确保您的bootstrap.js文件已加载 AFTER jQuery.js文件，如下所示：

<script src="path/to/jQueryFile"></script>
<script src="path/to/BootstrapFile"></script>

并且只有一个jQuery链接（添加多个jQuery文件会导致jQuery依赖脚本中的冲突）。

Answer 3

问题是一个错字。

错误：data-targert="#myNavbar"

正确：data-target="#myNavbar"

Bootstrap可折叠导航栏未显示

3 个答案: