Javascript 可调整大小的div中的引导网格系统responisve实用程序

我试过谷歌搜索什么也没找到所以我来了

假设你有这个

<div class="resizable">
    <div class='row'>
      <div class='col-xs-12 col-md-4' style='border:1px solid red;'> HELLo </div>
    </div>
</div>

你好

这项工作如预期，在>md屏幕中，col将占33%，但我的问题是

在调整大小时，是否有办法使col md/col xs响应于其容器而不是视口

我想到了一个简单的js解决方案，在开始调整div大小之前，它可以记录.resizeable的当前宽度，并在调整大小后根据新的大小删除或读取来操作col xs、col md

但如果有什么已经存在或更好的解决方案，我会喜欢你分享它

谢谢

当前解决方案：

当我使用jquery ui调整大小时，我写了一些简单的东西：

$(document).on('resizestop','.resizable',function(){

        $(this).find('.row').each(function(){
        var w = $(this).innerWidth();
        var c=$(this).children('div');
        if(w <= 768){
          c.attr('class', c.attr('class').replace(' col-md-',' w-col-md-')); 
          c.attr('class', c.attr('class').replace(' col-sm-',' w-col-sm-')); 
          c.attr('class', c.attr('class').replace(' col-lg-',' w-col-lg-'));
        }else if(w < 960){
          c.attr('class', c.attr('class').replace(' w-col-sm-',' col-sm-'));
          c.attr('class', c.attr('class').replace(' col-md-',' w-col-md-')); 
          c.attr('class', c.attr('class').replace(' col-lg-',' w-col-lg-')); 
        }else if(w >= 960){
          c.attr('class', c.attr('class').replace(' w-col-sm-',' col-sm-'));
          c.attr('class', c.attr('class').replace(' w-col-lg-',' col-lg-'));
          c.attr('class', c.attr('class').replace(' w-col-md-',' col-md-')); 
        }
      });
  });

$（document）.on（'resizestop'，'.resizable'，function（））{
$（this）.find（'.row'）.each（function（）{
var w=$（this.innerWidth（）；
var c=$（this.children（'div'）；
如果（w=960）{
c、 attr（'class'，c.attr（'class'）。替换（'w-col-sm-'，'col-sm-'）；
c、 attr（'class'，c.attr（'class'）。替换（'w-col-lg-'，'col lg-'）；
c、 attr（'class'，c.attr（'class'）。替换（'w-col-md-'，'col-md-'）；
}
});
});

如果父项的宽度小于XX px，则只需删除所有col md、col lg，如果其较大，则恢复

让我知道您对这种方法的看法：）

请注意，这说明col xs是类中的第一个，其他任何响应类紧随其后。

---

谢谢

我不太明白你的问题。你可能正在寻找

我希望您的引导布局是流畅的（使用

.container fluid

）。 当

可调整大小的

被定义为视口的百分比时（例如，包装在

col-md-9

中，它在

容器流体

中获得了75%的视口），您应该能够为元素定义一组新的断点（或.resizable）

例如，当.resizeable被包装在

col-md-6

中时，它的宽度将是视口的50%，因此当视口>（768 x 2）时，它的大小将>大于768px。现在，您可以为这种情况定义一个媒体查询

@media（最小宽度：1536px）{}

，当

.resizeable

>768px的宽度为

示例

html

<div class="container-fluid">
<div class="col-md-9">
  <div class="resizable">
    <div class="row">
      <div class="col" style="border:1px solid red;"> HELLo </div>
      <div class="col" style="border:1px solid red;"> HELLo </div>
      <div class="col" style="border:1px solid red;"> HELLo </div>
    </div>
</div>
</div>
<div class="col-md-3">
  Right side
</div>
</div>

另见：

.resizable .row .col {
width:100%;
      } 
@media (min-width:1024px) {
/* (768 * 12) / 9 */
.resizable .row .col {
   width:50%; 
   float:left;  
            }             
}  
@media (min-width:1280px) {
/* (960 * 12) / 9 */
 .resizable .row .col { 
   width:33.33%; 
   float:left; 
  }               
}