Лучший способ заставить Bootstrap реагировать на основе родительского div?

Мне нужен контейнер в бутстрапе для реагирования на основе родительского div вместо медиа-запроса. Я не могу понять лучший способ, не делая этого, особенно если не использовать javascript, если это возможно. В настоящее время, при изменении размера, я рассчитываю, если .span* div должны быть 100% ширины (если родительский div заканчивается ниже 640px) или уважать CSS-коллимацию.

Вот jsfiddle. С CSS на .somecontainer внутри .span* внутри должен быть макет, как если бы он был мобильным - поэтому каждый столбец должен иметь полную ширину, если вы измените CSS на выше 640px, например, он будет переформатировать в макет столбцов.

Любые идеи?

В настоящее время используется код, подобный этому (что не идеально)

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
  });
});

http://jsfiddle.net/tsdexter/ArqUR/1/

Спасибо, Томас

ОТВЕТЫ

Ответ 1

Используя elementQuery polyfill, вы сможете это сделать. Ниже приведено репо на gitHub, здесь статья о Smashing Magazine, который больше объясняет концепцию, и вот CodePen автор создал, чтобы продемонстрировать, как его использовать.

По существу, вы используете CSS для определения точек останова на основе родительского div. Вот пример синтаксиса:

header[min-width~="500px"] {
    background-color: #eee;
}

Вот соответствующая цитата из Smashing Article:

Представление элемента запроса. Запрос элемента похож на носитель запрос в том случае, если условие выполнено, будет применен некоторый CSS. Условия запроса элемента (такие как min-width, max-width, min-height и max-height) основаны на элементах, а не на браузере.