Проблема с размещением в стеке трехколоночного макета Bootstrap

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

См. Изображение для желаемого порядка компоновки настольных и мобильных устройств:

http://www.nojomedia.com/images/3column-requirements.jpg


css responsive-design twitter-bootstrap css-float
person user1737893    schedule 11.10.2012    source источник
comment
Пожалуйста, включите дополнительную информацию и хотя бы изображение желаемого макета.   -  person Cristiano Fontes    schedule 11.10.2012

Ответы (1)


arrow_upward
6
arrow_downward

Поставьте блок в желаемом для мобил порядке. Затем потяните «виджет» вправо:

<div class="container">
    <div class="row">
        <div class="span3 custom-nav"></div>
        <div class="span3 custom-widget pull-right"></div>
        <div class="span6 custom-content"></div>
    </div>
</div>​

На мобильном телефоне сбросьте поплавок:

@media (max-width: 767px) {
    [class*="span"].pull-right {
        float: none;
    }
}

Еще несколько вещей:

  • Я использую префикс custom, чтобы не запускать предопределенные классы .nav и .content Bootstrap.
  • Посмотрите, как это работает на скрипке.
  • Проверьте соответствующий вопрос Я ответил.
  • Добро пожаловать в StackOverflow.
person Pavlo    schedule 11.10.2012