在导航栏中引导 4 个数字答案

【问题标题】：boostrap 4 numbers in navbar在导航栏中引导 4 个数字
【发布时间】：2018-04-27 11:42:16
【问题描述】：

关于如何在引导导航栏中添加某个主题在该主题下的条目数的任何建议，如下所示？

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

【问题讨论】：

到底是什么问题？只需编写正确的标记...

标签： twitter-bootstrap navigation

【解决方案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 变量的值

【讨论】：

【解决方案2】：

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

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

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

如果您在导航栏（徽标、菜单等）中内置了其他元素，则必须进行一些调整以确保一切都适合，否则.navbar-text 默认会平均共享可用空间。

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

【讨论】：