我正在开发的网站让我发疯。我有一个媒体查询来折叠导航栏,但我不知道如何更改按钮。崩溃也无法正确显示。试图改变navhar高度来补偿和尝试使用位置:相对但没有运气。
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倍
感谢您的帮助
答案 0 :(得分: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>
答案 1 :(得分:0)
没有小提琴/片段来测试您的代码,您可以尝试的一个观察是clearfix
。
在jumbotron
div上方添加以下代码,位于结尾</nav>
<div class="clearfix"></div>