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

Question

我需要一个引导程序中的容器来响应父div而不是媒体查询.如果不这样做,我无法找到最好的方法,特别是如果可能的话,不使用javascript.目前,在调整大小时,我会计算.span*div是否应该是100%宽度(如果父div最终低于640px)或尊重columning 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/

Answer 1

通过使用elementQuery polyfill,您应该能够完成此任务.这是gitHub上的回购,这是一篇关于Smashing Magazine的文章,它解释了这个概念的更多内容,这里是作者创建的CodePen,用于演示如何使用它.

基本上,您使用CSS根据父div定义断点.以下是语法示例:

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

以下是Smashing文章的相关引用:

介绍元素查询.元素查询类似于媒体查询,因为如果满足条件,则将应用一些CSS.元素查询条件(例如最小宽度,最大宽度,最小高度和最大高度)基于元素而不是浏览器.