0
我使用引导4阿尔法4为此开发网站:https://dev.shivampaw.com/me引导4导航栏延迟清除
而且我添加了一个明确的:既能导航栏这样的标志是保存在上面就行了。
但是,当你打开导航栏需要一秒钟的项目才能正常跌落,我不知道如何解决这个问题。
这是HTML:
<header class="site-header">
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<div class="container">
<button type="button"
class="navbar-toggler hidden-md-up pull-xs-right"
data-toggle="collapse"
data-target="#nav-content"
aria-expanded="false">
☰
</button>
<a href="https://www.shivampaw.com" title="Shivam Paw">
<img alt="Shivam Paw Logo"
class="navbar-brand"
src="https://www.shivampaw.com/images/sp.png">
</a>
<div class="collapse navbar-toggleable-sm" id="nav-content">
<ul class="nav navbar-nav pull-md-right">
<li class="active nav-item">
<a href="index.html"
title="Shivam Paw Home"
class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="about.html"
title="About Shivam Paw"
class="nav-link">
About Me
</a>
</li>
<li class="nav-item">
<a href="work.html"
title="Shivam Paw's Work"
class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="blog.html"
title="Shivam Paw's Blog"
class="nav-link">
My Blog
</a>
</li>
<li class="nav-item">
<a href="contact.html"
title="Contact Shivam Paw"
class="nav-link">
Contact Me
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
这是CSS:
/* Navbar Changes */
.navbar-brand {
max-width: 55px;
}
.navbar-light {
background-color: white;
border: none;
-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
.navbar-light .navbar-nav .nav-item .nav-link {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: black;
}
li.active.nav-item a.nav-link,
li.active.nav-item a.nav-link:focus,
li.active.nav-item a.nav-link:hover {
color: #337ab7 !important;
background-color: inherit;
}
@media (max-width: 767px){
ul.navbar-nav{
clear: both;
}
}
谢谢 - 它的作品。 – Shiv