我需要 Bootstrap 中的容器基于父 div 而不是媒体查询进行响应。如果可能的话,我无法找出最好的方法,尤其是在不使用 javascript 的情况下。目前,在调整大小时,我会计算 .span*
div 是否应为 100% 宽度(如果父 div 最终低于 640px)或遵守列 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');
});
});
最佳答案
通过使用 elementQuery polyfill,您应该能够完成此任务。这是 repo on gitHub , 这里是 an article on Smashing Magazine这更多地解释了这个概念,这里是 a CodePen作者创建是为了演示如何使用它。
本质上,您使用 CSS 来根据父 div 定义断点。下面是一个语法示例:
header[min-width~="500px"] {
background-color: #eee;
}
这里是 Smashing 文章中的相关引用:
Introducing the element query. An element query is similar to a media query in that, if a condition is met, some CSS will be applied. Element query conditions (such as min-width, max-width, min-height and max-height) are based on elements, instead of the browser.
关于javascript - 使 Bootstrap 响应基于父 div 的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18599378/