0

Нужна колонка шириной 8, по середине страницы. Ниже ее во всю ширину(12) другим цветом.

Имею в итоге:

<div class="col-md-2 column">&nbsp;</div><div class="col-md-8 column">колонка 1 </div><div class="col-md-2 column">&nbsp;</div>
<div class="col-md-12 column">колонка 2</div>

Но почему-то нижняя колонка начинается от начала родительского div: div Не могу найти причину, адрес страницы http://lavds-wordpress.tw1.ru/test/ Это WP, контент поста вставляется внутри блока <div class="blog-text">

Так же не работает выравнивание таблиц если они пустые, поэтому поставил nbsp.

6
  • 1
    Причиной такого поведения является float: left у колонок с шириной 2. Оберните разные строки в отдельные div-ы
    – Rulet
    26 ноя 2016 в 9:54
  • <div><div class="col-md-2 column">&nbsp;</div><div class="col-md-8 column">колонка 1 </div><div class="col-md-2 column">&nbsp;</div></div> <div><div class="col-md-12 column">колонка 2</div></div> вы имеете ввиду так? не помогает, нижний div все так же от начала более раннего родительского. 26 ноя 2016 в 9:58
  • 1
    Добавьте еще класс row этим div-ам
    – Rulet
    26 ноя 2016 в 10:10
  • спасибо, помогло 26 ноя 2016 в 10:15
  • И общий div с классом container добавьте 27 ноя 2016 в 17:49

1 ответ 1

1

Никаких флоатов не нужно, не начинайте косячить в самом начале, есть такой класс .col-md-offset-2 он сдвигает ваш блок на 2 секции, при условии если вы уберете секции .col-md-2, так же посмотрите свойства .col-md-push-2 и .col-md-pull-2 эти классы позволяют двигать блоки (менять местами) это альтернатива флоатов

Попробуйте так 1 вариант:

<div class="container">
 <div class="row">
  <div class="first col-xs-8 col-xs-offset-2">Колонка 1 с использованием .col-xs-offset-2</div>
 </div>
 <div class="row">
  <div class="second col-xs-12">Колонка 2</div>
 </div>
</div>

вариант 2:

<div class="container">
 <div class="row">
  <div class="sidebar col-xs-2">Sidebar Right</div>
  <div class="first col-xs-8">Колонка 1 с использованием .col-xs-offset-2</div>
  <div class="sidebar col-xs-2">Sidebar Right</div>
 </div>
 <div class="row">
  <div class="second col-xs-12">Колонка 2</div>
 </div>
</div>

Что касается pull и push. На extra small устройствах (с разрешение до 768px): 1 блок находится над вторым col-xs-12, на устройствах с разрешением больше или равно 768px, блоки меняют свой размер и делятся пополам col-sm-6, первый блок уходит вправо col-sm-push-6, а второй - влево col-sm-pull-6.

<div class="container">
 <div class="row">
  <div class="first col-xs-12 col-sm-6 col-sm-push-6">Колонка 1 отправляем ее вправо на 6 секции .col-sm-push-6</div>
  <div class="second col-xs-12 col-sm-6 col-sm-pull-6">Колонка 2 отправляем ее влево на 6 секций .col-sm-pull-6</div>
 </div>
</div>

Все примеры

1
  • Спасибо. Это все понятно. Просто там шаблон WP, и блоки в редакторе задаются предопределенными в функциях шорткодами, и все случаи описывать разработчикам смысла не было. Поэтому там и используется float left 27 ноя 2016 в 18:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.