试图在引导程序4中将nav链接与徽标对齐 [英] trying to align nav links with logo in bootstrap 4

问题描述

我在将我的导航链接与我的徽标对齐时遇到问题。目前，我的徽标是我的导航的中心，并且由于某种原因的链接显示在我的徽标上方，而不是旁边。下面的图片显示了我的问题

I am having issues with aligning my navigation links with my logo. Currently, my logo is in the center of my navigation and the links for some reason are displaying above my logo rather than next to it. the image below shows my issue

我想让它看起来像这样：

I am trying to get it to look like this:

这里是我的标头代码：

  <header id="header" role="banner">
            <div class="header-inner">
                <nav class="navbar">
                    <div class="container text-xs-center">
                        <div class="navbar-nav">
                            <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Media</a>
                            <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
                            <a href="#" class="nav-item-link nav-item nav-link">About Us</a>
                            <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
                            <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

和我的css：

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
}

a.nav-item:hover{
    color:#000;
}

a.nav-item:hover{
    color:#000;
}

.navbar-nav{
    display:inline-block;
}

#donate{
    background-color: #7ED321;
    border-radius: 8px;
    padding: 15px;
}

#header{
    width:100%;
}

.header-inner{
    padding: 18px 0;
    width:100%;
}

任何帮助将不胜感激。

推荐答案

尝试

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
    vertical-align:center;
}

如果不起作用，请尝试添加 line-height 属性，使其达到所需的垂直位置。

If that doesn't work, then try adding line-height property to get it to the desired vertical position.

这篇关于试图在引导程序4中将nav链接与徽标对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！