javascript - Bootstrap 4 菜单和 Logo 不会对齐

Question

我正在尝试解决这个问题，但找不到原因。

菜单和 Logo 不会彼此对齐。

这是我的导航 HTML:

 <nav class="navbar navbar-fixed-top navbar-light bg-faded">

                        <!-- Toggle Button -->
                        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
                            ☰
                        </button>

                        <!-- Nav Content -->
                        <div class="collapse navbar-toggleable-xs" id="nav-content">
                            <a class="navbar-brand" href="">MIGRATE</a>
                            <ul class="nav navbar-nav pull-right">

                                <li class="nav-item active">
                                    <a class="nav-link scrollto" href="#home">Home</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link scrollto" href="#grid">Grid System</a>
                                </li>


                                <li class="nav-item">
                                    <a class="nav-link scrollto" href="#tooltips">Tooltips</a>
                                </li>


                                <li class="nav-item">
                                    <a class="nav-link scrollto" href="#tables">Tables</a>
                                </li>



                                <li class="nav-item">
                                    <a class="nav-link scrollto" href="#carousel">Carousel</a>
                                </li>


                                <li class="nav-item">
                                    <a class="nav-link scrollto" href="#cards">Cards</a>
                                </li>


                                <li class="nav-item">
                                    <a class="nav-link scrollto" href="#forms">Forms</a>
                                </li>

                            </ul>
                        </div>

                    </nav>

如您所见，品牌和菜单看起来不太好，因为它们没有相邻 float 。

您可以在此处查看 JSFIDDLE:https://jsfiddle.net/683onLeg/

Answer 1

您在 ul 上有一个全局类，它向任何 ul 的顶部添加 40 像素的边距。如果您删除或覆盖该规则，一切看起来都很好。