javascript - 使 Bootstrap 响应基于父 div 的最佳方法？

Question

我需要 Bootstrap 中的容器基于父 div 而不是媒体查询进行响应。如果可能的话，我无法找出最好的方法，尤其是在不使用 javascript 的情况下。目前，在调整大小时，我会计算 .span* div 是否应为 100% 宽度(如果父 div 最终低于 640px)或遵守列 CSS。

这是一个 jsfiddle。使用 .somecontainer 上的 CSS，.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，您应该能够完成此任务。这是 repo on gitHub , 这里是 an article on Smashing Magazine这更多地解释了这个概念，这里是 a CodePen作者创建是为了演示如何使用它。

本质上，您使用 CSS 来根据父 div 定义断点。下面是一个语法示例:

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

这里是 Smashing 文章中的相关引用:

Introducing the element query. An element query is similar to a media query in that, if a condition is met, some CSS will be applied. Element query conditions (such as min-width, max-width, min-height and max-height) are based on elements, instead of the browser.