Лучший способ заставить 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) основаны на элементах, а не на браузере.
