文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4菜单和Logo不对齐

问引导4菜单和Logo不对齐
EN

Stack Overflow用户

提问于 2015-11-16 14:07:42

回答 3查看 623关注 0票数 2

我正努力想办法解决这个问题，但找不到原因。

菜单和徽标不会对齐。

这是我的：

 <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>

正如你所看到的那样，这个品牌和菜单看起来不太好，因为它不会在彼此之间浮动。

您可以在这里查看JSFIDDLE：https://jsfiddle.net/683onLeg/

jquery

html

css

twitter-bootstrap

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-11-16 14:30:10

使用这种样式，它会对齐它，并将它正好放在菜单栏的中间。

ul.navbar-nav{
    margin-top: 0;
}
ul.navbar-nav li a{
    line-height: 24px !important;
}

请参阅所附图片，以供您的标题参考。

票数 0

Stack Overflow用户

发布于 2015-11-16 14:14:22

在ul's上有一个全局类，在任何ul的顶部增加40 to的边距。如果您删除或重写该规则，一切看起来都很好。

票数 1

Stack Overflow用户

发布于 2015-11-16 14:20:01

如上文所述，有如下毛毯式：

ul {
    margin-top: 40px;
}

要么删除该样式(这可能会破坏布局中其他<ul>的显示方式)，要么仅通过指定它来覆盖ul.navbar-nav类的边距：

ul.navbar-nav {
    margin-top: 0;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33737350

复制

相似问题

问引导4菜单和Logo不对齐
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4菜单和Logo不对齐EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4菜单和Logo不对齐
EN