可调整大小的 div 中的引导网格系统响应实用程序答案

【问题标题】：Bootstrap grid system responisve utility in resizable divs可调整大小的 div 中的引导网格系统响应实用程序
【发布时间】：2014-03-27 23:06:49
【问题描述】：

我用谷歌搜索什么也没找到，所以我在这里

假设你有这个

<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 大小之前，它可以记录 .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 px，这只是删除所有col-md，col-lg，如果它更大，则恢复它。

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

请注意，这规定 col-xs 是类中的第一个，然后是任何其他响应类。谢谢

【问题讨论】：

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

例如，当 .resizable 被包裹在 col-md-6 中时，它的宽度将是视口的 50%，因此当视口 > (768 x 2) 时，它的大小将 > 大于 768px 现在您可以定义媒体查询对于这种情况@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

【讨论】：