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

01.09.2015 (обновлено: 22.02.2019)

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

<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>

Спасибо!

Если статья понравилась, то поделитесь ей в социальных сетях:

Дата публикации

01-09-2015

Автор

Vlad

Просмотры

968

Избранное

Нравится

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

Александр Мальцев 07 сентября 2015, 16:54 0

Вы не правильно разметили блок Меню. Блок «Меню» необходимо поместить в блок с классом .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 (именно свои) на него влияют. Скорее всего это какие отступы…

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