Не работает bootstrap сетка, когда заключаю в div, почему?

Question

[София Валькер]

Не работает bootstrap сетка, когда заключаю в div class main, как показано на картинке


а когда этот div убираю, все работает отлично, в чём дело?

Comments

[sim3x]

Используйте sass

или узнайте, что можно делать class="container main"

[София Валькер]

sim3x, просто в интернете урок видел, там заключено в div и всё работает отлично.

[sim3x]

София Валькер, смотрите в офф доки, а не в сомнительные уроки в интернете

[Froggyweb]

потому что флексбокс.

Answer 1

[Сергей]

По документации .col должен быть непосредственным дочерним элементом .row (потому что row имеет свойство display: flex и колонки должны становиться флекс-элементами)

Цитата

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Answer 2

[Сергей]

Попробуйте так:

<div class="row main">
   <div class="col-md-4">Главная</div>
   <div class="col-md-4">новости</div>
   <div class="col-md-4">контакты</div>
</div>

Но вообще меню надо бы делать через ul li
И в бутстрапе есть реализация меню

Answer 3

[Павел]

Скорее всего к main применяются какие то свои стили, попробуйте другой класс задать

Comments

[София Валькер]

любой пробовала