导航标题没有很好地对齐并且导航栏有点太厚？答案

【问题标题】：Navigation Title is not well aligned and the navbar is a bit too thick?导航标题没有很好地对齐并且导航栏有点太厚？
【发布时间】：2017-04-02 22:09:58
【问题描述】：

由于某种原因，标题没有正确对齐并且导航栏太粗？我怎样才能让它显示正确对齐和更小的尺寸？

我确信它可以使用 Bootstrap 本身来完成，而不需要额外的 css，对吧？

对不起，我不能直接在这里发布图片，需要更高的声誉。
Screenshot of the navbar

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    
    <!-- This link is just added for support on StackOverflow. -->
    <link href="http://157.97.56.42:8000/static/css/bootstrap.css" rel="stylesheet"/> 
    
    <style>
        html, body {
            margin-top: 65px;
        }
    </style>

    {% block base.head %}
    {% endblock %}
</head>
<body>
    {% block base.header %}
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <span class="navbar-brand">Developity</span>

            <ul class="nav navbar-nav">
                <li><a href="/index" class="navbar-text">Home</a></li>
                <li><a href="/projects" class="navbar-text">Projects</a></li>
            </ul>
        </nav>
    {% endblock %}

    {% block base.body %}
    {% endblock %}

    {% block base.footer %}
    {% endblock %}

    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    
    <!-- This link is just added for support on StackOverflow. -->
    <script src="http://157.97.56.42:8000/static/js/jquery.js"></script>
    <script src="http://157.97.56.42:8000/static/js/bootstrap.js"></script>
</body>
</html>

【问题讨论】：

你有自定义 CSS 吗？
只有 CSS，代码里已经有什么了。

标签： python html css django twitter-bootstrap

【解决方案1】：

删除 navbar-text 类将删除链接的边距，使导航栏更小并且所有内容对齐。

<nav class="navbar navbar-inverse" role="navigation">
  <span class="navbar-brand">Developity</span>
  <ul class="nav navbar-nav">
    <li><a href="/index">Home</a></li>
    <li><a href="/projects">Projects</a></li>
  </ul>
</nav>

或者您可以将 navbar-text 添加到 navbar-brand 以使其具有与链接相同的边距。

<nav class="navbar navbar-inverse" role="navigation">
  <span class="navbar-brand navbar-text">Developity</span>
  <ul class="nav navbar-nav">   
    <li><a href="/index" class="navbar-text">Home</a></li>
    <li><a href="/projects" class="navbar-text">Projects</a></li>
  </ul>
</nav>

这里都显示http://codepen.io/anon/pen/RpvYba

【讨论】：

非常感谢，它确实有效，但如何添加标签/pils？
nav-pills 和 nav-tabs 类没有内置的 nav-brand 类。但在这种情况下，你可以自己制作。对于垂直对齐，您可以通过将品牌的行高与导航的高度匹配来对齐。在 codepen codepen.io/anon/pen/RpvYba 中添加了示例