Проблемы с изменением порядка столбцов Bootstrap

Я пытаюсь изменить порядок столбцов на своем веб-сайте с помощью метода Bootstrap для изменения порядка столбцов в зависимости от размера экрана, который отлично работает для большинства адаптивных макетов, которые я тестирую, кроме 1.

Макет, имеющий проблемы, — это альбомный макет планшета (1024 x 768), который отображается следующим образом:

Планшет в альбомной ориентации

На каждом втором экране отображается синий div и правый div либо с красным div сверху, если экран слишком мал, либо справа с синим div, выровненным точно рядом с ним, если экран достаточно большой.

Это код, который я использую прямо сейчас:

<div class="container">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="row clearfix">
            <div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
                Basket
            </div>
            <div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
                News
            </div>
        </div>
    </div>
</div>

Кто-нибудь знает, почему синий div находится так далеко справа на макете планшета, а не касается красного div, как это должно быть?


html css twitter-bootstrap
person Liam Potter    schedule 12.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Некоторые общие вопросы разметки:

  • Во-первых, col-xl-* нет, так что от них можно избавиться.
  • Во-вторых, вам не нужен col-xs-12, так как по умолчанию он занимает всю ширину, если не указано иное.
  • В-третьих, Bootstrap в первую очередь предназначен для мобильных устройств, поэтому большие размеры переопределяют существующие меньшие размеры, а это означает, что если вы не собираетесь что-то менять, нет необходимости снова указывать больший размер.

Фактическая проблема заключается в том, что col-*-pull-* относится к тому месту, где элемент будет размещен. Имейте в виду, вы ничего не меняли в потоке документов. Таким образом, элементы располагаются нормально, а затем сдвигаются по фазе с помощью left или right. Поскольку синий контейнер обычно начинается с 4 столбцов, вам нужно оттянуть его назад только на 4 столбца вместо 8.

Все это можно переписать так:

.red  { background: red  }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row ">
    <div class="col-md-4 col-md-push-8 red"> Basket </div>
    <div class="col-md-8 col-md-pull-4 blue"> News </div>
  </div>
</div>

person KyleMit    schedule 12.05.2015