对齐徽标和导航栏列表项?

时间:2017-08-20 20:34:42

标签: css twitter-bootstrap navbar

我有以下导航栏并包含了它的图像:

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-left" href="#"><img id ="logo" src="{% static 'core/images/logo_footer.png' %}"></a>
        </div>
        <ul class="nav navbar-nav navbar-right">
           <li><a href="{% url 'index' %}">Home</a></li>
           <li><a href="{% url 'repairs_and_upgrades' %}">Repairs/Upgrades</a></li>
           <li><a href="{% url 'remote_backups' %}">Remote Backups</a></li>
           <li><a href="{% url 'networking' %}">Networking</a></li>
           <li><a href="{% url 'data_recovery' %}">Data Recovery</a></li>
           <li><a href="{% url 'contact' %}">Contact Us</a></li>
        </ul>
    </div>
</nav>

的CSS:

#logo {
    height: auto;
    width: auto;
    max-height: 75px;
    max-width: 250px;
}

Bootstrap navbar

我怎样才能使列表项目(Home,Repairs / Upgrades等)与徽标对齐?

1 个答案:

答案 0 :(得分:1)

您可以更改列表css标记

.li{
 margin-top:5%;
}