javascript - Bootstrap 4 导航栏延迟清算

Question

我正在为这个开发站点使用 bootstrap 4 alpha 4:https://dev.shivampaw.com/me

并且我在导航栏中添加了一个 clear:both，因此 Logo 保留在上面的行中。

但是当您打开导航栏时，元素需要一秒钟才能正常落下，我不确定如何解决这个问题。

这是 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">
                &#9776;
            </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;
    }
}

Answer 1

您应该改为在媒体查询中定位#nav-content 元素:

@media (max-width: 767px){
    #nav-content{
        clear: both;
    }
}