[英]Bootstrap 4 Navbar Delay in Clearing
I am using bootstrap 4 alpha 4 for this development site: https://dev.shivampaw.com/me 我正在为此开发网站使用bootstrap 4 alpha 4: https : //dev.shivampaw.com/me
And I have added a clear:both to the navbar so the logo is kept on the line above. 并且我在导航栏上添加了clear:Both和Both,因此徽标保留在上面的行中。
But when you open the navbar it takes a second for the items to fall down properly and I'm not sure how to fix this. 但是,当您打开导航栏时,需要花费一秒钟的时间才能使这些项目正确掉落,我不确定如何解决此问题。
This is the HTML: 这是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>
And this is the CSS: 这是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;
}
}
You should target the #nav-content element inside the media query instead: 您应该改为在媒体查询中定位#nav-content元素:
@media (max-width: 767px){
#nav-content{
clear: both;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.