基于父 div 使 Bootstrap 响应的最佳方法? [英] Best way to make Bootstrap responsive based on parent div?

问题描述

我需要引导程序中的一个容器来根据父 div 而不是媒体查询进行响应.如果可能的话，我无法找出最好的方法而不这样做，尤其是不使用 javascript.目前，在调整大小时，我会计算 .span* div 是否应该是 100% 宽度(如果父 div 最终低于 640px)或尊重列 CSS.

I need a container in bootstrap to be responsive based on the parent div instead of a media query. I can't figure out the best way without to do it, particularly without using javascript, if possible. Currently, on resize, I'm calculated if .span* divs should be 100% width (if the parent div ends up below 640px) or respect the columning CSS.

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

Here is a jsfiddle. With the CSS on .somecontainer the .span*'s inside should layout as if it's mobile - so each column should go full width, if you change the CSS to above 640px, for example, it would re-layout to the columns layout.

有什么想法吗?

目前正在使用类似的代码(不太理想)

Currently using code similar to this (which is not ideal)

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

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

推荐答案

通过使用 elementQuery polyfill，您应该能够完成此任务.这是 gitHub 上的存储库，这是 Smashing Magazine 上的一篇文章 解释了有关该概念的更多信息，这里是CodePen 作者创建以演示如何使用它.

By using the elementQuery polyfill you should be able to accomplish this. Here is the repo on gitHub, here is an article on Smashing Magazine that explains more about the concept and here is a CodePen the author created to demonstrate how to use it.

本质上，您使用 CSS 来定义基于父 div 的断点.下面是一个语法示例:

Essentially you use CSS to define breakpoints based on the parent div. Here is an example of the syntax:

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

这是 Smashing 文章中的相关引述:

Here is a relevant quote from the Smashing Article:

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

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.

这篇关于基于父 div 使 Bootstrap 响应的最佳方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！