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

我需要一个引导程序中的容器来响应父div而不是媒体查询。 如果没有,我无法找到最好的方法,特别是如果可能的话,不使用javascript。 目前,在resize时,我计算是否.span* divs应该是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/

谢谢,托马斯

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

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

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

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

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