0
我打算让我的bootstrap导航栏切换显示内容而不是将其按下。我尝试过不同的技巧，包括过去发布的一些解决方案，但仍然无法完成。我发现大多数人都提出了navbar-fixed-top，这对我不起作用。如何让我的bootstrap导航栏切换覆盖内容？
.navbar {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
border-radius: 0px;
}
.navbar-brand {
width: 120px;
height: 120px;
}
.navbar-brand img {
width: 100px;
height: 100px;
}
/* LOGO ANIMATION */
@-webkit-keyframes rotate {
0%,
80% {
-webkit-transform: rotate(0deg);
}
90%,
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0%,
80% {
transform: rotate(0deg);
}
90%,
100% {
transform: rotate(360deg);
}
}
#logo {
-webkit-animation: rotate 5s infinite linear;
-moz-animation: rotate 5s infinite linear;
-o-animation: rotate 5s infinite linear;
-ms-animation: rotate 5s infinite linear;
animation: rotate 5s infinite linear;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.navbar-right {
padding-top: 20px;
}
.navbar-default .navbar-nav>li>a {
color: #07d4de;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
background-color: #07d4de;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background-color: #07d4de;
color: white;
}
.navbar-default .navbar-toggle {
border-color: #07d4de;
}
.navbar-default .navbar-toggle:hover {
background-color: #07d4de;
}
.navbar-toggle {
margin-top: 30px;
height
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #07d4de;
text-align: center;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #07ded4;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="index.html"><img src="img/logo9.png" alt="Logo"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Hire Me</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div id="myname">
<h1 class="quotes">I am <span style="color: #07d4de">Creative</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Smart</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Awesome</span></h1>
<h1 class="quotes">I am <span style="color: #07d4de">Olawale</span></h1>
</div>
</section>
为什么'Navbar的固定top'不适合你？ – fen1x
，因为布局不需要固定导航栏。即使在将navbar-fixed-top包含到课程中后，如果展开菜单按钮，它仍然不起作用。 –
所以你想让导航栏不被固定在大屏幕上，并固定在小屏幕上？ – fen1x