Bootstrap折叠的导航栏切换不起作用

时间：2019-01-03 14:42:42

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

将窗口调整为足够小的尺寸时，切换按钮出现，但是当按下按钮时则无作用。我检查了html几次，并确保引导文件正确上传，但仍然无济于事。

还有一种方法可以更改切换点的父断点，以使导航栏链接变大时相对较快地收缩。

@charset "UTF-8";

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 1.5vmin;
  font-family: 'brandon grotesque'
}

.button {
  display: inline-block;
  border: solid white 2px;
  margin-top: 25px;
  -moz-transition: color .5s ease-in;
  -o-transition: color .5s ease-in;
  -webkit-transition: color .5s ease-in;
  background-color: transparent;
  color: white;
  text-decoration: none;
  padding: 2px;
}

.button:hover {
  background-color: white;
  color: black;
  text-decoration: none;
  transition-timing-function: ease-in-out;
}

#logo {
  height: 50px;
}

.navbar {
  min-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}
<html>
<head>
  <title>MASSERIA ELYSIUM</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <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>
      <div class="collapse navbar-collapse" id="myNavbar"></div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-center">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">DINING</a></li>
          <li><a href="#">LOCATION</a></li>
          <li><a href="#">ACCOMODATION</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">CONTACT</a></li>
          <a class="button" href="#">BOOK NOW</a>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

对html编码来说还很新，所以请帮助我：）

1 个答案:

答案 0 :(得分：0)

您已添加两次navbar-collapse，主要是一个空的<div>。替换以下内容：

<div class="collapse navbar-collapse" id="myNavbar"></div>
<div class="collapse navbar-collapse">

具有以下内容：

<div class="collapse navbar-collapse" id="myNavbar">

删除一次，即可使用：

@charset "UTF-8";
.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 1.5vmin;
  font-family: 'brandon grotesque'
}

.button {
  display: inline-block;
  border: solid white 2px;
  margin-top: 25px;
  -moz-transition: color .5s ease-in;
  -o-transition: color .5s ease-in;
  -webkit-transition: color .5s ease-in;
  background-color: transparent;
  color: white;
  text-decoration: none;
  padding: 2px;
}

.button:hover {
  background-color: white;
  color: black;
  text-decoration: none;
  transition-timing-function: ease-in-out;
}

#logo {
  height: 50px;
}

.navbar {
  min-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

@media screen and (max-width: 767px) {
  .navbar-nav.navbar-center {
    position: static;
    color: #fff;
    transform: none;
    font-size: 1em;
  }
}
<html>

<head>
  <title>MASSERIA ELYSIUM</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <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>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-center">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">DINING</a></li>
          <li><a href="#">LOCATION</a></li>
          <li><a href="#">ACCOMODATION</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">CONTACT</a></li>
          <a class="button" href="#">BOOK NOW</a>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

第二期：

.navbar-nav.navbar-center {
  position: absolute;
}

在较小的设备的媒体查询中删除此内容，也删除转换。

@media screen and (max-width: 767px) {
  .navbar-nav.navbar-center {
    position: static;
    transform: none;
    font-size: 1em;
  }
}

预览

preview

相关问题
最新问题