Проблема с bootstrap 4?

Question

[Alibek Kulseitov]

Только перешел с 3 бутстрапа на 4 и не понимаю)
1) Первый вопрос точнее не проблема. Зачем нужны классы col-1, col-2 итд? Раз есть col-md, col-sm итд
2) Долго мучаюсь с проблемой, как решить это? (скрин прикрепил) дело в том что если оборачивать содержимое navbar в конейнер то на мобильниках он сжимает контент по центру? Такой же баг есть у самого сайта бутстрапа. Как это решить?

Comments

[Сергей delphinpro]

ну посмотрите какие у них стили =)
там флексовая сетка. и эти столбики устроены так, что могут равномерно заполнить пространство строки, сколько бы их не было

Answer 1

[vvovas]

1) col-md, col-sm разные в зависимости от размеров экрана. Т.е. col-sm-1 и col-md-1 на разных экранах могут отличаться.
2) попробуйте container-fluid он растягивает на всю ширину.

Comments

[Alibek Kulseitov]

Так мне же изначально нужно navbar был в 1170px а в мобильниках должно быть на всю ширину. Я так понял если прописать контейнер 100% то заработает все. Но все не так просто. Должны быть какие-то решения через классы

Answer 2

[Станислав]

1) в bootstrap 4 разбили макеты на 5 видов xs, sm, md, lg, xl
- чтобы обозначить ширину колонки для md+ разрешений, необходимо задать класс например col-md-6
- чтобы обозначить ширину колонки для всех разрешений, необходимо задать класс например col-6
по сути они только недавно в очередной альфа версии устранили класс col-xs-6 и ему подобные
2) навбар разве не за пределами контейнера делается?

Comments

[Alibek Kulseitov]

Странно но этот класс XS до сих пор есть)

Ну так мне же нужно чтобы navbar был в контейнере а не full width.

[Станислав]

у тебя последняя альфа версия? там вроди нет его уже.
вот инфа из их официального блога:

Responsive utilities and the great infix

With Alpha 6, we’ve made Bootstrap’s extensive suite of utilities—including classes for display, float, and flexbox, and more—completely responsive. To keep these class names as approachable and representative of their scope as possible, we’ve also made two important changes to their naming scheme.

First, we’ve dropped the -xs infix from our lowest (extra small) breakpoint. xs isn’t a responsive breakpoint quite like sm, md, lg, and xl because it doesn’t start applying styles at a min-width and up. It simply applies to everything as there’s no bounding media query.

Second, we’ve renamed several classes to better articulate their property-value pairings. Instead of pull, we use float. Instead of creating new names for the various flexbox properties, we start with the property name.

Put that all together and you end up with updated classes like .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. These new classes bring immense power and customization to folks building with Bootstrap. They also make it easier for those migrating from v3 with clearer mappings to legacy class names.

Если очень кратко, то тут они говорят о том что убрали xs

Конкретно о твоей проблеме, мог бы посмотреть если была бы ссылка, а так фантазировать что у тебя там и как не хочется)

Answer 3

[Viktor Bogutskii]

1. col-1 это начиная от Extra small, раньше бы писали col-xs-1


2. Судя по реализации навбар планировался по всей ширине. Попробуйте сделать без navbar если он не вписывается в вашу верстку.

Answer 4

[lavezzi1]

Выкиньте bs4 и напишите свое решение.