[英]Best way to make Bootstrap responsive based on parent div?
我需要一个引导程序中的容器来响应父div而不是媒体查询。 如果不这样做,我无法找到最好的方法,特别是如果可能的话,不使用javascript。 目前,在调整大小时,我计算出.span*
div应该是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');
});
});
通过使用elementQuery polyfill,您应该能够完成此任务。 这是gitHub上的回购 ,这是一篇关于Smashing Magazine的文章,它解释了这个概念的更多内容,这里是作者创建的CodePen ,用于演示如何使用它。
基本上,您使用CSS根据父div定义断点。 以下是语法示例:
header[min-width~="500px"] {
background-color: #eee;
}
以下是Smashing文章的相关引用:
介绍元素查询。 元素查询类似于媒体查询,因为如果满足条件,则将应用一些CSS。 元素查询条件(例如最小宽度,最大宽度,最小高度和最大高度)基于元素而不是浏览器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.