Twitter Bootstrap 2: Как заставить адаптивный дизайн разместить боковую панель снизу, а не сверху?

Question

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

Я новичок в Twitter Bootstrap и попытался выяснить, какая часть CSS в bootstrap-response.css, но я ничего не увидел в разделе для @media (max-width: 480px).

Я посмотрел документацию Bootstrap для адаптивного дизайна , и там не так много деталей.

Хотел бы немного указателей ...

Answer 1

Вы можете добиться этого эффекта, переворачивая контейнеры для боковой панели и области содержимого и просто перемещая их так, как вы хотите.Это можно сделать аккуратно, без лишних проблем с таблицей стилей начальной загрузки, назначив свои собственные идентификаторы боковой панели и области содержимого и выполнив что-то вроде этого:

CSS

.sidebar-nav {
    padding: 9px 0;
    width:100%;
}

#sidebar {
    float:left;
    margin-left:0;
}

#content {
    float:right !important;
    margin-left:auto;
}

@media (max-width: 767px) {
    #sidebar {
        display: inline-block;
        margin-top: 20px;
        width: 100%;
    }

    #content {
        float:none !important;
        margin-left:0;
    }
}

Тогда все, что вам нужно сделать, это перевернуть контейнерные дивы так:

<div id="content" class="span9"> ... </div> /* item you want up top first */
<div id="sidebar" class="span3"> ... </div> /* last item to be rendered below */

Демо: http://jsfiddle.net/andresilich/YEUwN/1/show/ Редактировать здесь: http://jsfiddle.net/andresilich/YEUwN/1/

Answer 2

Это может быть легко.

// Pull right sidebar to top
<div class="row">
  <div class="span3 pull-right">Right sidebar</div>
  <div class="span9">Content section</div>
</div>

// Or pull left sidebar to bottom side
<div class="row">
  <div class="span9 pull-right">Content section</div>
  <div class="span3">Left Sidebar</div>
</div>

Answer 3

Я создал «расширение» сетки, чтобы разрешить упорядочение источников для сеток с текучей средой - его можно было оптимизировать, но оно выполняет свою работу.Просто используйте col-pull-# & col-push-# (где # - количество столбцов, которые вы хотите вытащить / нажать).Также, чтобы переопределить поля для первого элемента, добавьте класс first к элементу, который вы хотите отобразить первым в строке.Посмотрите демоверсию и получите HTML / CSS / LESS здесь:

http://jsfiddle.net/NGuL2/3/embedded/result/

Answer 4

Это для Андреса Ильича, который ответил на этот вопрос. Я не вижу способа сделать комментарий выше или связаться с ним напрямую. Поэтому прошу прощения у модераторов.

Чтобы сделать эту ветку более полезной, я хотел бы знать, что подразумевается под "Тогда все, что вам нужно сделать, это перевернуть контейнеры div следующим образом:" Как перевернуть div контейнера? Демонстрация / редактирование кода до сих пор не ясна для таких, как я, кто не очень знаком с этой техникой. Я не могу понять, что он делает и как это работает. Похоже, что какой-то Javascript действует на него. В идеале, это был бы пример с пустыми костями только с двумя div и минимальным css, указывающим, на какой строке css происходит «переворот».

Если у кого-то есть время, чтобы уточнить, я был бы очень признателен.

Answer 5

Нет оптимизированного решения, но вот как я это сделал:

<script type="text/javascript">
$(window).resize(function() {
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
    else{
        $(".main").insertAfter(".sidebar");
    }
});

$(document).ready(function(){
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
});
</script>