基於父div使Bootstrap響應的最佳方法？

Question

我需要一個引導程序中的容器來響應父div而不是媒體查詢。 如果不這樣做，我無法找到最好的方法，特別是如果可能的話，不使用javascript。 目前，在調整大小時，我計算出.span* div應該是100％寬度（如果父div最終低於640px）還是尊重columning CSS。

這是一個jsfiddle。 使用.somecontainer上的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/

Answer 1

通過使用elementQuery polyfill，您應該能夠完成此任務。 這是gitHub上的回購 ，這是一篇關於Smashing Magazine的文章，它解釋了這個概念的更多內容，這里是作者創建的CodePen ，用於演示如何使用它。

基本上，您使用CSS根據父div定義斷點。 以下是語法示例：

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

以下是Smashing文章的相關引用：

介紹元素查詢。 元素查詢類似於媒體查詢，因為如果滿足條件，則將應用一些CSS。 元素查詢條件（例如最小寬度，最大寬度，最小高度和最大高度）基於元素而不是瀏覽器。