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

Ответ 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;
    }
}

Затем все, что вам нужно сделать, это перевернуть контейнерные divs следующим образом:

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

Ответ 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>

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 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>