бустрап 4 номера в навбар - PullRequest
Новая
       7

бустрап 4 номера в навбар

0 голосов
/ 27 апреля 2018

Любые предложения о том, как добавить количество записей, которые есть в теме по этой теме на панели начальной загрузки, как показано ниже? 

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

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Поскольку вы используете 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 (например, разрывы строк). Как и в случае с любым другим компонентом Navbar, если вы не хотите, чтобы контент занимал 100% области просмотра, вы можете заключить его в класс .container.

0 голосов
/ 27 апреля 2018

Если вам нужно добавить номер вместе с тегом navbar, вы можете использовать ниже: 

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, используя свою бизнес-логику

...