Question

引导导航菜单出现问题。在移动断点处，下拉菜单始终加载扩展。其他所有东西看起来都很实用，但我不能得到下拉不加载扩展。我已经完成并尽可能地替换课程，但没有任何运气。此外，没有在文档中找到任何可以解释问题的内容。以前任何导航栏专家都有这个吗？

谢谢！

.navbar-inverse {
  background-color: #303030 !important;
}

.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  background-color: #303030
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  background-color: #191919
}

.dropdown-menu {
  background-color: #303030
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #303030
}

.navbar-inverse {
  background-image: none;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-image: none;
}

.navbar-inverse {
  border-color: #303030 !important
}

.navbar-inverse .navbar-brand {
  color: #FFFFFF
}

.navbar-inverse .navbar-brand:hover {
  color: #FFBE0D
}

.navbar-inverse .navbar-nav>li>a {
  color: #FFFFFF
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #FFBE0D
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  color: #FFBE0D
}

.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
  color: #FFBE0D
}

.dropdown-menu>li>a {
  color: #FFFFFF
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  color: #FFBE0D
}

.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-top-color: #D1D1D1
}

.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-top-color: #FFFFFF
}

.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-bottom-color: #D1D1D1
}

.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #FFFFFF
}


/*Resonsive custom breakpoints */


/*full desktop view */

@media only screen and (min-width: 1200px) {
  .navbar-nav {
    margin-left: 45%;
  }
}


/* tablet landscape view */

@media only screen and (max-width:1199px) {
  .navbar-nav {
    margin-top: 50px;
  }
}


/*portrait tablet */

@media only screen and (max-width:756px) {
  .navbar-brand {
    margin-bottom: 50px;
  }
  .navbar-collapse {
    padding-top: -40px;
  }
}


/* mobile phone */

@media only screen and (max-width:755px) {
  .navbar-brand {
    margin-bottom: 5px;
  }
  .navbar-collapse {
    padding-top: -40px;
  }
  .navbar-header {
    height: 100px;
  }
  .navbar-brand img {
    width: 90%;
  }
}

@media only screen and (max-width: 477px) {
  .navbar-brand {
    margin-top: -30px;
  }
  .navbar-collapse ul {
    margin-top: 0px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <!--META INFO -->

  <meta http-equiv="content-type" content="text/html;" charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content "">

  <!--FAVICON-->
  <link rel="icon" href="IMG/favicon.ico">

  <!--EXTERNAL LINKS IN THIS SECTION-->
  <!--- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <!--Valera for nav/headers -->
  <link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">
  <!--Barlow for copy -->

  <!--JS/CUSTOMJS/JQUERY-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://use.fontawesome.com/b8bd89a558.js"></script>

  <!--- Bootstrap core CSS-->
  <!-- Latest compiled and minified CSS -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!--- Bootstrap core CSS-->

  <!--END EXTERNAL LINKS SECTION -->

  <!--custom CSS -->
  <link rel="stylesheet" href="custom.css">
  <!---important that custom.css is loads last in DOM  -->
  <title> My little website</title>

  <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>
<!-- HEADER -->

<body>
  <header class="site-header" role="banner">
    <!-- HEADER AND NAVIGATION DIV -->
    <div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">
            <img src="IMG/logo.png" alt="my little website" width="100%" class="img-logo"></a>
        </div>
        <nav class="navbar-collapse bs-navbar-collapse in" role="navigation" style="height: auto;">
          <ul class="nav navbar-nav">
            <li><a href="#">home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="project.html">Pies</a></li>
                <li><a href="project.html">Cakes</a></li>
                <li><a href="project.html">Cookies</a></li>
              </ul>
            </li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a data-toggle="modal" href="#myModal">Subscribe</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="navbar-wrapper">
      <!--NAVBAR WRAPPER-->
    </div>
  </header>
  <!-- HEADER AND NAVIGATION DIV -->

</body>
<!-- BODY -->

</html>

请参阅https://codepen.io/coffee_n_whisky/pen/POQXyj

Answer 1

只需替换

<nav class="navbar-collapse bs-navbar-collapse **in**" role="navigation" style="height: auto;">

到

<nav class="navbar-collapse bs-navbar-collapse **collapse**" role="navigation" style="height: auto;">

引导导航栏显示为在移动断点处完全展开的问题。其他功能

1 个答案: