Najlepszy sposób na sprawdzenie Bootstrap w oparciu o div rodzica?

Question

Potrzebuję kontener w bootstrap, aby reagować na podstawie nadrzędnego elementu div zamiast zapytania o media. Nie potrafię znaleźć najlepszego sposobu, aby tego nie robić, szczególnie bez używania javascript, jeśli to możliwe. Obecnie, przy zmianie rozmiaru, jestem obliczany, jeśli divy .span* powinny być w 100% szerokości (jeśli nadrzędny div kończy się poniżej 640 pikseli) lub przestrzegać CSS w zestawieniu.

Oto jsfiddle. Z CSS na .somecontainer w środku powinien wyglądać tak, jakby był mobilny - więc każda kolumna powinna iść na pełną szerokość, jeśli zmienisz CSS na powyżej 640 pikseli, na przykład, przełożyłaby układ na układ kolumn.

Wszelkie pomysły?

Obecnie przy użyciu kodu podobnego do tego (co nie jest idealne)

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

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

Dzięki, Thomas

Answer 1

za pomocą elementQuery PolyFill powinieneś być w stanie tego dokonać. Oto repo on gitHub, tutaj jest an article on Smashing Magazine, który wyjaśnia więcej na temat koncepcji i tutaj jest a CodePen autor stworzony, aby pokazać, jak z niego korzystać.

Zasadniczo używasz CSS do definiowania punktów przerwania na podstawie elementu nadrzędnego div. Oto przykład składni:

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

Oto odnośny cytat z Smashing artykułu:

Przedstawiamy kwerendy elementu. Zapytanie o element jest podobne do zapytania dotyczącego nośnika , ponieważ jeśli warunek zostanie spełniony, zostanie zastosowany jakiś styl CSS. Warunki zapytania o element (takie jak min-width, max-width, min-height i max-height) są oparte na elementach, a nie na przeglądarce.