Question

我需要一个引导程序中的容器，以便根据父div而不是媒体查询进行响应。如果不这样做，我无法找到最好的方法，特别是如果可能的话，不使用javascript。目前，在调整大小时，我计算如果.span* div应该是100％宽度（如果父div最终低于640px）或尊重columning 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;
}

以下是粉碎文章的相关引用：

介绍元素查询。元素查询类似于媒体查询，如果满足条件，将应用一些CSS。元素查询条件（例如最小宽度，最大宽度，最小高度和 max-height）基于元素，而不是浏览器。

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

1 个答案: