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

问题描述

我需要一个容器在bootstrap响应基于父div而不是媒体查询。我不能找出最好的方法没有做到这一点，特别是没有使用javascript，如果可能的话。目前，在resize，我计算如果 .span * divs应该是100％宽度（如果父div结束低于640像素）或尊重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 * 的内部应该布置为移动设备 - go full width，如果你把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.

任何想法？

目前使用类似的代码b
$ b

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/

感谢，
Thomas

Thanks, Thomas

推荐答案

通过使用elementQuery polyfill，你应该能够实现这一点。以下是 gitHub上的repo ，这里是一篇关于Smashing杂志的文章，详细解释了这个概念，作者创建的 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.

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