Почему неправильно отображается Bootstrap макет?

Vlad

22.02.2019

1.5K

Добрый день! Подскажите, пожалуйста, почему вылезает на новый ряд колонка, если задан такой вариант:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">Выпадающие списки</div>
    <div class="col-md-4">Выпадающие списки</div>
    <div class="col-md-5">Выпадающие списки</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">Логотип</div>
    <div class="col-md-5">Поиск</div>
    <div class="col-md-4">Этот блок переходит в новый ряд</div>
  </div>
</div>
<div class="col-md-12">Меню</div>

Спасибо!

Комментарии ()

Александр Мальцев

07 сентября 2015, 16:54

Вы не правильно разметили блок Меню. Блок «Меню» необходимо поместить в блок с классом .container-fluid или .container.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">Выпадающие списки</div>
    <div class="col-md-4">Выпадающие списки</div>
    <div class="col-md-5">Выпадающие списки</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">Логотип</div>
    <div class="col-md-5">Поиск</div>
    <div class="col-md-4">Этот блок переходит в новый ряд</div>
  </div>
</div>
<div class="container-fluid">Меню</div>

Если блок с классом .col-md-4 переходит на новую строку, то проверьте какие стили CSS (именно свои) на него влияют. Скорее всего это какие отступы…

Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.