Question

有关如何在引导程序导航栏中添加主题在该主题下的条目数的任何建议，如下所示：

 PHP    Javascript ASP.NET  HTML/CSS
2,456       500     4,444    23,454

Answer 1

如果您需要添加数字以及导航栏标记，可以使用以下内容：

navbar.component.html

<ul class="nav navbar-nav">
  <li class="active"><a href="javascript">javascript<span class="some class to beautify">{{ javascriptCount}}</span></a></li>
</ul>

在navbar.component.ts中，您使用业务逻辑计算javascriptCount varibale的值

Answer 2

由于您使用的是Bootstrap 4，为什么不使用.navbar-text类？

https://getbootstrap.com/docs/4.1/components/navbar/#text

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text text-center"><span class="font-weight-bold d-block">PHP</span>2,456</span>
  <span class="navbar-text text-center"><span class="font-weight-bold d-block">Javascript</span>500</span>
  <span class="navbar-text text-center"><span class="font-weight-bold d-block">ASP.NET</span>4,444</span>
  <span class="navbar-text text-center"><span class="font-weight-bold d-block">HTML/CSS</span>23,454</span>
</nav>

＆＃13;

如果您的导航栏中内置了其他元素（徽标，菜单等），则必须进行一些调整以确保一切正常，否则.navbar-text默认共享可用空间。< / p>

一些用于调整字体粗细和换行符的其他实用程序类为您提供了额外的样式并减少了不必要的HTML（如换行符）。与任何Navbar组件一样，如果您不希望内容占据视口的100％，您可以将所述内容包装在.container类中。

导航栏中的boostrap 4号码

2 个答案: