html - 无法弄清楚如何使我的可折叠导航栏按钮不总是可见(Bootstrap v.3)

标签 html css twitter-bootstrap-3

我不知道如何让我的可折叠导航栏按钮不一直出现。我已经按照与我几乎完全相同的代码学习了各种在线教程,但是我没有获得相同的结果。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pentakill - About</title>
  <link rel="icon" href="images/pentakilllogo.ico">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
  <nav class="navbar navbar-expand-sm sticky-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
            <span class="icon-bar metal">Options</span>
          </button>
        <a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
        <span class="navbar-brand metal">Pentakill</span>
      </div>
      <div class="collapse navbar-collapse" id="myCollapsibleNavbar">
        <ul class="nav navbar-nav">
          <li>
            <a class="metal" href="index.php">Home</a>
          </li>
          <li>
            <a class="metal" href="about.php">About</a>
          </li>
          <li>
            <a class="metal" href="music.php">Music</a>
          </li>
          <li class="active">
            <a class="metal" href="tour.php">Tour</a>
          </li>
          <li class="nav-item">
            <a class="metal" href="members.php">Members</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
        </ul>
      </div>
    </div>
  </nav>

我已经尝试添加和删除各种 div,但似乎没有什么不同。 我还尝试删除“选项”一词以防万一是罪魁祸首,但没有成功。

最佳答案

您是否有意使用 Bootstrap 3.4 CDN 而不是最新版本?跟随教程,例如 https://getbootstrap.com/docs/4.0/components/navbar/可能会导致问题。我将您的代码放入链接到最新版本的代码笔中,但没有看到按钮,只是出现了间距问题。

关于html - 无法弄清楚如何使我的可折叠导航栏按钮不总是可见(Bootstrap v.3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58982135/

相关文章:

javascript - 一页上多个div悬停效果

jquery - Liferay 首次登录 Portlet CSS 问题

html - 如何解决 CSS 中的边距问题?

php - 在模式中提交表单不将数据保存到数据库

html - 在按钮悬停时限制 div 调整大小

jquery - 应用于父 div 的框阴影会切断 IE 中的子 div

javascript - 滚动时事件类未切换

CSS 过渡计数器?

html - Bootstrap 下拉菜单出现在页面底部

javascript - 如何从左侧而不是从顶部滑动导航栏?