Bootstrap4, как обойти баг navbar при адаптации?

Question

[Антон Антон]

Перехожу с 3 на 4 бутстрап, наткнулся на неприятный баг навбара, у меня использовался вариант, когда контейнер внутри навбара, т.е. второй вариант демо. Баг в том, что когда смотрим на маленьком экране, то бутерброд сливается с названием:


В 3 бутстрапе подобных проблем не было. Подскажите, какие стили добавить, чтобы обойти. Сам я не специалист, и бутстрап как раз использовал потом что тяп ляп и в продакшн, все работает.

Answer 1

[iBird Rose]

@media (max-width: 575px) {
.container {
    width: 100%;
}

Comments

[Антон Антон]

да, сам написал примерно так же:

@media (max-width: 575px) {
  .navbar-toggleable-sm > .container {
    margin-left: 0;
    margin-right: 0;
  }
}

Answer 2

[Максим Тимофеев]

Есть большая разница, между релизом и альфа версией.
Версия Bootstrap4 на данным момент v4.0.0-alpha.6
Так что баги не просто могут быть, а обещаны и гарантированы. Хотя в Вашем случае не исключены "кривые руки", (сорри, речь не о Вас, а о Вашей проблеме, не могу сформулировать) но так или иначе - Вы используете продукт, который еще не вышел даже в бета тесты. Зачем? flex?

Comments

[Антон Антон]

Если честно, то из-за того, что переписываю на vue, а в 3 бутстраме есть "несовместимости" типа data- атрибутов или удаления некоторых элементов из DOM в событиях бутстрапа, что приводит к рассинхронизации vue и DOM с неприятными последствиями. Их, конечно, можно обходить, но мне в какой-то момент надоело, и я начал искать связки бутстрапа и vue. bootstrap-vue оказался более-менее работающим, а он как раз использует связку с 4м бутстрапом.

По пути понял, что всякие webpack'и - шляпа, слишком стильно-модно-современная. В какой момент всё заработало я так и не понял :)

[Максим Тимофеев]

Антон Антон: Значит придется постоянно сталкиваться с такими радостями. Но как решить ваш вопрос если Вы даже ссылки не дали? Надеетесь, что кто-то повторил Вашу проблему 1 в 1?

[Антон Антон]

Максим Тимофеев: Ссылки на что? Баг воспроизводится на странице навбаров бутстрапа. На нее ссылка есть.

[Максим Тимофеев]

Антон Антон: Печалька, а я думаю на черта Вы ссылку в доки дали? ))) Ща гляну

[Максим Тимофеев]

Я так понимаю, проще всего скрыть .navbar-brand на маленькой ширине