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

【问题标题】：Best way to make Bootstrap responsive based on parent div?使 Bootstrap 响应基于父 div 的最佳方法？
【发布时间】：2013-09-07 02:33:56
【问题描述】：

我需要一个引导容器来响应基于父 div 而不是媒体查询。如果可能的话，我无法找出最好的方法，尤其是不使用 javascript。目前，在调整大小时，我会计算 .span* div 是否应为 100% 宽度（如果父 div 最终低于 640 像素）或尊重列 CSS。

这是一个 jsfiddle。使用.somecontainer 上的 CSS，.span* 的内部应该像移动一样进行布局 - 所以每列应该全宽，例如，如果将 CSS 更改为 640 像素以上，它将重新布局到列布局.

有什么想法吗？

目前使用类似这样的代码（不理想）

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
  });
});

http://jsfiddle.net/tsdexter/ArqUR/1/

【问题讨论】：

你已有的代码有问题吗？
@cimmanon 显然不是，因为没有其他答案。

标签： javascript jquery css twitter-bootstrap responsive-design

【解决方案1】：

通过使用 elementQuery polyfill，您应该能够做到这一点。这里是repo on gitHub，这里是an article on Smashing Magazine，它解释了更多关于这个概念，这里是作者创建的a CodePen来演示如何使用它。

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

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

这是 Smashing Article 的相关引述：

介绍元素查询。元素查询类似于媒体查询中，如果满足条件，将应用一些 CSS。元素查询条件（如 min-width、max-width、min-height 和 max-height) 基于元素，而不是浏览器。

【讨论】：