导航标题没有很好地对齐,导航栏有点太厚?

2024-03-28 11:34:01 发布

您现在位置:Python中文网/ 问答频道 /正文

由于某些原因,标题没有正确对齐,导航栏太厚? 我怎样才能让它显示正确对齐和更小的大小?你知道吗

我确信它可以使用引导本身来完成,而不需要额外的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>

Tags: basehtmljslinkscriptstaticbodybootstrap
1条回答
网友
1楼 · 发布于 2024-03-28 11:34:01

删除navbar文本类将删除链接的边距,使navbar变小,所有内容对齐。你知道吗

<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文本添加到navbar品牌,使其与链接具有相同的边距。你知道吗

<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

相关问题 更多 >