javascript - Bootstrap 导航栏折叠问题

Question

我正在开发的网站快把我逼疯了。我收到一个媒体查询来折叠导航栏，但我不知道如何更改按钮。折叠也无法正确显示。尝试更改导航高度以补偿并尝试使用position:relative但没有运气。

HTML

<div class="containter-fluid" id="full-size-container">

    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" id="navbar">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="images/logo.png" alt="LOGO"></a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="glyphicon glyphicon-menu-hamburger"></span>
          Menu
        </button>
      </div>
    <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav" id="nav">
          <li><a href="home-page.html">Home</a></li>
          <li><a href="superstars.html">Superstars</a></li>
          <li><a href="#">Shows</a></li>
          <li><a href="about-us.html">About </a></li>
          <li><a href="sponsors.html">Sponsors</a></li>
          <li><a href="#">Social</a></li>
        </ul>
        </div>
    </nav>



<div class="jumbotron">
 <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/banner1.jpg" alt="banner1">
    </div>

    <div class="item">
      <img src="images/banner2.jpg" alt="banner2">
    </div>

    <div class="item">
      <img src="images/banner3.jpg" alt="banner3">
    </div>

    <div class="item">
      <img src="images/banner4.jpg" alt="banner4">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
</div>

和 CSS

body{
    padding-top: 0px;
    background-color: black;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0px;
    padding: 0px;
    font-family:"Open Sans";
    height: auto;
}


.carousel .item {
    width: auto;
    max-height: 700px;
    height: auto;
    object-fit: cover;
}
.carousel-inner > .item > img {
    height: none;
    width:  100%;
    overflow:hidden;
}
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
          transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.jumbotron{
    padding-top:100px;
    padding-bottom: 00px;
    overflow: hidden;
}
#nav{
    margin-left: 80px;
}
ul li{
    position:relative;
    top: 25px;
    left: 00px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
}
@media screen and (max-width: 1170px){

    .navbar-header {
        float: none;
    }
    .navbar-brand{
        height:;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid ;
        background-color: black;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
        position: relative;
        top: -10px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-brand > button{
        position: relative;
        top: 10px;
        right: 50px;
    }

}
.navbar-brand > img{
    left: 30px;
    height:100px;
    max-height:100px;
    width:auto;
    position: relative;
    top: -15px;

}

#navbar {
    font-size: 1.3em;
    width: 100%;
    text-transform: uppercase;
    height: 100px;
    background-color: black;
    color: blue;
    margin: 0px;
    overflow: hidden;
}
ul li a{
    color: blue;
}

#navbar .navbar-toggle{
    color: white;
    font-weight: bold;
    border-color: white;
    }

#navbar .navbar-toggle:hover {
    color: #333;
    background-color: #ddd;
}

#navbar .navbar-toggle .glyphicon{
    color:white;
}
#navbar .navbar-toggle:hover .glyphicon{
    color:white;
}

问题是:

Collapse navbar does not show above the carousel Collapse navbar does not start from the navbar (you can see carousel slide between collapse button and navbar start) Menu button must be 1.2x bigger

谢谢你的帮助

Answer 1

这通常是因为您为 navbar 指定了一个默认值为 min-height: 50px 的高度，因此当低于 768px 时，它会为移动设备创建背景导航链接。通过设置固定高度，它无法再按预期运行。尝试使用填充来更改导航的高度。

.navbar.navbar-inverse {
  font-size: 1.3em;
  width: 100%;
  text-transform: uppercase;
  padding: 25px 0;
  background-color: black;
  margin-bottom: 0;
}

工作示例:

body {
  background-color: black;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans";
  height: auto;
}
.navbar.navbar-inverse {
  font-size: 1.3em;
  width: 100%;
  text-transform: uppercase;
  padding: 25px 0;
  background-color: black;
  margin-bottom: 0;
}
.navbar.navbar-inverse .navbar-toggle {
  color: white;
  font-weight: bold;
  border-color: white;
}
.navbar.navbar-inverse .navbar-toggle:hover {
  color: #333;
  background-color: #ddd;
}
.navbar.navbar-inverse.navbar-toggle .glyphicon {
  color: white;
}
.navbar.navbar-inverse .navbar-toggle:hover .glyphicon {
  color: white;
}
.navbar.navbar-inverse .navbar-nav > li {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
  color: blue;
}
.navbar.navbar-inverse .navbar-brand {
  padding-top: 0px;
  margin-top: -25px;
}
.navbar.navbar-inverse .navbar-brand > img {
  height: 100px;
  max-height: 100px;
  width: auto;
}
@media screen and (max-width: 1170px) {
  .navbar {
    padding: 25px 0;
  }
  .navbar .navbar-header {
    float: none;
  }
  .navbar .navbar-toggle {
    display: block;
  }
  .navbar .navbar-left,
  .navbar .navbar-right {
    float: none !important;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid;
    background-color: black;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 25px 0 -12.5px;
  }
  .navbar .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar .navbar-collapse.collapse.in {
    display: block!important;
  }
  .navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar .navbar-nav > li {
    float: none;
  }
  .navbar .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar.navbar-inverse .navbar-brand {
    padding-top: 1px;
    margin-top: -20px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="containter-fluid" id="full-size-container">
  <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" id="navbar">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="glyphicon glyphicon-menu-hamburger"></span> Menu
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/100x100/f00" alt="LOGO">
      </a>
    </div>

    <div class="collapse navbar-collapse" id="collapse">
      <ul class="nav navbar-nav" id="nav">
        <li><a href="home-page.html">Home</a>
        </li>
        <li><a href="superstars.html">Superstars</a>
        </li>
        <li><a href="#">Shows</a>
        </li>
        <li><a href="about-us.html">About </a>
        </li>
        <li><a href="sponsors.html">Sponsors</a>
        </li>
        <li><a href="#">Social</a>
        </li>
      </ul>
    </div>

  </nav>
</div>