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

Posted 2023-03-06

【中文标题】使 Bootstrap 响应基于父 div 的最佳方法？

【英文标题】：Best way to make Bootstrap responsive based on parent 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 显然不是，因为没有其他答案。

【参考方案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) 基于元素，而不是浏览器。