python - 导航标题没有很好地对齐并且导航栏有点太粗了?

标签 python html css django twitter-bootstrap

出于某种原因,标题未正确对齐并且导航栏太粗? 我怎样才能让它显示正确对齐和更小的尺寸?

我确信它可以使用 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>

最佳答案

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

关于python - 导航标题没有很好地对齐并且导航栏有点太粗了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43174083/

相关文章:

javascript - 将类添加到不同页面上的元素

python - 删除没有值的字典条目 - Python

javascript - Canvas 粒子、碰撞和性能

javascript - IE定位帮助

javascript - 如何停止从左到右移动的图像一段时间并重新开始

javascript - 如何使现代 flipkart 横幅具有响应性

javascript - CSS 和 Javascript : Function to change color effects hover style

python - PyGame 中的中文 unicode 字体

python - 将 numpy 数组转换为列表返回类型 numpy.ndarray

python - 使用 matplotlib 绘制有限元网格的最有效方法?