【发布时间】：2016-05-11 08:44:12
【问题描述】：
我正在开发的网站快把我逼疯了。我有一个媒体查询来折叠导航栏，但我不知道如何更改按钮。折叠也无法正确显示。尝试更改导航高度以进行补偿并尝试使用 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;
}
问题是：
折叠导航栏不显示在轮播上方 折叠导航栏不从导航栏开始（你可以看到折叠按钮和导航栏开始之间的轮播滑动） 菜单按钮必须大 1.2 倍
感谢您的帮助
【问题讨论】：
-
嗨@RenierSwart，你能在sn-p或JSFiddle中复制这个吗？
标签： javascript jquery html css twitter-bootstrap