Как сделать такое в bootstrap 4?

Question

[Timofey Barinov]

В 3 это было так:

<a class="navbar-brand" href="/">Title></a>
<a class="custom navbar-brand" href="#">Баланс</a>

И выходило такое:

А сейчас так:

Как же это реализовать в BS 4?
При условии что меню должно быть справо...

Answer 1

[iBird Rose]

засунь баланс внутрь navbar-brand
и сразу же видимо нужно сказать что ты можешь спокойно изменить что navbar-brand ссылка. и сделать ее div к примеру. и лучше сразу задать ему стиль inline block; к примеру
а уже внутри сделать 2 ссылки. одна для бренда. другая для баланса

Answer 2

[Timofey Barinov]

Сложный bootstrap:

<div class="navbar-brand">
        <a class="navbar-brand" href="#">Brand</a>
        <a class="navbar-brand balance" href="#">Баланс: 123 руб.</a>
</div>

Спасибо iBird Rose

Answer 3

[Александр Решетняк]

Изучайте CSS)

Comments

[Timofey Barinov]

Обидно даже(

[Александр Решетняк]

Timofey Barinov: ладно ладно) в песочнице кодапен наверняка есть что желаешь codepen.io/search/pens?q=bootstrap%204%20navbar&li...

Answer 4

[Aligatro]

В 4 версии флексы же внедрили, так что я думаю надо делать это при помощи flex-grow.

Не знаю какие там есть хелперы в 4 страпе но по идее должно выглядеть так:

<nav class="navbar">
	<li class="element-1"></li>
	<li class="element-2"></li>
	<li class="element-3"></li>
</nav>

.element-3 {
	flex-grow: 3;
	align-self: flex-end;
}

Comments

[Timofey Barinov]

Перечитай вопрос. Поправил