javascript - Bootstrap 导航栏折叠问题

标签 javascript jquery html css twitter-bootstrap

我正在开发的网站快把我逼疯了。我收到一个媒体查询来折叠导航栏，但我不知道如何更改按钮。折叠也无法正确显示。尝试更改导航高度以补偿并尝试使用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

谢谢你的帮助

最佳答案

这通常是因为您为 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>

关于javascript - Bootstrap 导航栏折叠问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37149080/

上一篇：javascript - HTML 按钮刷新页面而不是将数据发送到数据库

下一篇：javascript - 如何在 Sencha Touch 应用程序中实现自定义 Toast？

相关文章：

javascript - 如何将 PostgreSQL 时间戳与 moment.js 进行比较并仅在日期基础上指定？

javascript - 简单的 HTML 图像幻灯片

javascript - 如何创建 JavaScript 条件来显示视频的图像预览或图片的图像预览？

javascript - JS 中的 html 类替换不起作用

javascript - 这个JS可以用纯CSS写吗？

javascript - 如何替换连接到另一个字符串的字符串？

javascript - 在数组中查找一个项目并添加一个值

javascript - Jquery 插件 - 事件未正确触发

javascript - 如何制作动态函数？

jquery - 在视觉上和 DOM 中对元素重新排序

©2024 IT工具网  联系我们