4 столбца до 2 столбцов с щелевым бутстрапом Twitter

У меня есть 4-х столбцовый флюид-макет:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">A</div>
        <div class="span3">B</div>
        <div class="span3">C</div>
        <div class="span3">D</div>
    </div>
</div>

[  A  ][  B  ][  C  ][  D  ]

Для мобильных устройств bootstrap отображает столбцы один под другим, который отлично работает:

[            A             ]
[            B             ]
[            C             ]
[            D             ]

Но для планшетов мне бы хотелось иметь 2 столбца из 2:

[      A     ][      B     ]
[      C     ][      D     ]

Возможно ли достичь этого поведения изначально с помощью бутстрапа?

Ответы

Ответ 1

Я узнал, что Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) предлагает эту разнородность, но я хочу продолжить работу с Twitter Bootstrap. Поэтому мне удалось добавить настраиваемое правило, основанное на методе, который использует Foundation:

@media (min-width: 768px) and (max-width: 979px) {
    .row-fluid > [class*=span]:nth-child(2n+1) {
      clear: both;
      margin-left: 0;
    }
}

Ответ 2

Добавление в ответ Эмилии также потребует reset ширины столбцов,

@media (min-width: 768px) and (max-width: 979px) {
    .row-fluid > [class*=span]:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }

    .row-fluid .span3 {
        width: 48.61878453038674%;
    }
}

Ответ 3

Вам просто нужно переопределить CSS для пролетов в запросе @media, соответствующем таблицам.

Итак, вы можете попробовать что-то вроде этого:

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  [class*=span] {
    width: 50%;
  }
}

Конечно, возможно, потребуется внести коррективы. Из-за заполнения и полей ширина может фактически не составлять 50%.

Ответ 4

Хм. Я пробовал оба этих правила в своем CSS, и ни один из них не работал у меня. Жаль, что этого нет в BS 2.0. Надеюсь, они добавят его в BS 3.0!

Спасибо,

JK