Question

我试过谷歌发现什么都没有，所以我在这里

让我们说你有这个

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

这项工作符合预期，并且在＆gt; 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，如果大于xpx，则将其恢复。

让我知道您对此方法的看法：）。

请注意，这表明col-xs是类中的第一个，其他任何响应类都遵循。感谢

Answer 1

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

我希望你的bootstrap布局是流畅的（使用.container-fluid）。当您的resizable被定义为视口的百分比（例如包裹在col-md-9中，其中.container-fluid内有75％的视口时，您应该能够定义一个新视口你的元素（或.resizable）的断点集。

例如，当.resizable被包裹在col-md-6中时，其宽度将是视口的50％，因此其大小将为＆gt;当视口＆gt;时超过768px （768 x 2）现在您可以为该情况@media (min-width: 1536px) {}定义媒体查询，当.resizable＆gt;的宽度为真时。 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

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

1 个答案: