В Twitter Bootstrap 2, как я могу получить правильные столбцы, чтобы перейти к вершине при сжатии экрана?

Я использую раскладку жидкости из двух столбцов в Twitter Bootstrap. Левый столбец является основным содержимым (span10), а правый столбец - боковой панелью для виджетов (span2). В настоящее время при изменении размера окна браузера Bootstrap отвечает, создавая один столбец с самой левой секцией сверху и самым правым снизу. Мне бы хотелось по-другому.

Это суть моего html:

<body>
  <div id="content" class="container-fluid">
    <div id="content-row-1" class="row-fluid">
      <div id="mainContainer" class="span10"> Lots of content goes here </div>
      <div id="sidebar" class="span2"> Widgets   </div>
    </div>  <!-- content-row-1 -->
  </div>  <!-- content -->
</body>

Есть ли способ иметь mainContainer слева и виджеты справа в широком окне, но привязать sidebar к вершине, когда окно сжимается?

Ответ 1

Отвечая на вопрос, похожий на этот сегодня, вы можете увидеть его здесь, что в основном сводилось к тому, что он перемещал поток боковой панели, плавая справа и компенсировать левый край области содержимого, а затем сбросить атрибут float боковой панели с запросом @media, чтобы снова разместить боковую панель с ее значением по умолчанию из таблицы стилей загрузки.

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

#sidebar {
    float:right;
}

#content {
    margin-left: 0;
}

@media (max-width: 767px) {
    #sidebar {
        float:none;
    }
}

Вот переработанная демо из предыдущего вопроса: fiddle, отредактируйте здесь.

Ответ 2

В bootstrap 3 это делается с упорядочением столбцов сетки (см. документацию по загрузке 3)

Пример

<div class="row">
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

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

Ответ 3

Я пришел после того, как этот вопрос разрешен с помощью чрезвычайно простого способа, чтобы достичь этого. Нет необходимости в @media и процентах:

Поместите div, который вы хотите, поверх страницы для мобильных телефонов перед другим div. В этом случае #sidebar появляется перед #mainContainer в вашем HTML-коде
Дайте # стороне класса pull-right
Дайте #mainContainer класс pull-left
Задайте маржу слева для этих 2 divs до 0

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

Пример:

--- HTML 

<div id="content" class="container-fluid">
  <div id="content-row-1" class="row-fluid">
    <div id="sidebar" class="span2 pull-right"> Widgets   </div>
    <div id="mainContainer" class="span10 pull-left"> Lots of content goes here </div>
  </div>  <!-- content-row-1 -->
</div>  <!-- content -->

--- CSS

div#sidebar, div#mainContainer {
  margin-left: 0;
}

Ответ 4

В зависимости от ваших параметров просто отмените div sidebar и mainContainer в исходном порядке html и float: right каждый из них. Что-то вроде: http://jsfiddle.net/3g8Bt/.

Ответ 5

Я придумал супер-простое решение, которое, по-видимому, работает, по крайней мере, с расположением двух столбцов. Просто создайте новый класс для разметки и простой CSS.

HTML (вытащенный из моего Drupal.tpl)

<div class="row-fluid">
    <div class="span9 pull-right re-order">
        <?php print $content['content']; ?>
    </div>
    <div class="span3 re-order">
        <?php print $content['sidebar']; ?>
    </div>
</div>

CSS

.row-fluid .re-order {
    margin: 0;
}

.row-fluid [class*="span"]:last-child {
    margin-right: 2.7624309392265194%;
    margin-left: 0;
}

Возможно, это будет немного усовершенствовано, но оно работает.

Ответ 6

Принятый ответ отлично работает. В качестве альтернативы иногда бывает сложно, если вам нужно найти несколько частей html в позициях против бутстрапа. Это также можно решить, создав дублированные html-snips и используя .visible-phone и .hidden-phone, чтобы контролировать их отображение/скрытие.

<div class="row-fluid">
<div class="span12 visible-phone">
    <ul>
        <li><a href="">tab1</a></li>
        <li><a href="">tab2</a></li>
        <li><a href="">tab3</a></li>
        <li><a href="">tab4</a></li>

    </ul>
</div>
</div>

<div class="row-fluid">
<div class="span9">

      <p>
             Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
      </p>
</div>
<div class="span3 hidden-phone">
    <ul>
        <li><a href="">tab1</a></li>
        <li><a href="">tab2</a></li>
        <li><a href="">tab3</a></li>
        <li><a href="">tab4</a></li>
    </ul>
</div>
</div>

fiddle