javascript - 可调整大小的 div 中的 Bootstrap 网格系统响应实用程序

Question

我用谷歌搜索什么也没找到，所以我来了

假设你有这个

<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 在调整大小时响应其容器而不是视口(viewport)？

我在想一个简单的 js 解决方案，在开始调整 div 大小之前，它可以记录 .resizable 的当前宽度，并在调整大小完成后根据新大小通过删除或读取来操作 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-')); 
        }
      });
  });

如果父级的宽度小于 XX 像素，这将简单地删除所有 col-md、col-lg，如果它更大则恢复它。

让我知道您对这种方法的看法:)。

请注意，这表明 col-xs 是类(class)中的第一个，然后是任何其他响应式类(class)。谢谢

Answer 1

我不确定我是否理解您的问题。您可能正在寻找 Media Queries for Elements .

我希望您的 Bootstrap 布局是流畅的(使用 .container-fluid)。当您的 resizable 被定义为视口(viewport)的百分比时(例如包裹在 col-md-9 中，它在 中获得了 75% 的视口(viewport)。 container-fluid) 你应该能够为你的元素(或.resizable)定义一组新的断点。

例如，当 .resizable 被包裹在 col-md-6 中时，它的宽度将是视口(viewport)的 50%，因此当视口(viewport) > (768 x 2) 现在您可以为这种情况定义一个媒体查询 @media (min-width: 1536px) {} 当 .resizable > 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>

CSS

.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; 
  }               
}  

另请参阅:http://www.bootply.com/YHigazGje5