javascript - 响应式页面 - 强制响应式布局

Question

我正在使用 Bootstrap ，但问题与任何响应式框架相关

我有一个响应式页面(以简单的方式)看起来像这样

<div class="wrap">
    <div class="row page">
      <div class="col-xs-12 col-md-6">
       some stuff
      </div>
      <div class="col-xs-12 col-md-6">
       some other stuff
      </div>
    </div>
</div>

我想使用这个布局，但要让响应范围在某个父 div 上(在本例中为 .wrap)，而不是在窗口上，这意味着如果父 div 在同一位置特定大小，强制响应断点生效。

这样一来，我可以将这个"template"放在页面的任何位置，结果会根据换行大小而不是屏幕/窗口大小而有所不同

有没有办法做到这一点？还是我在外太空？

Answer 1

我认为现在有检查容器 div 宽度的方法(使用 CSS)，但是是的，您可以尝试检查浏览器大小并添加/删除一些可以产生类似结果的类宽度。

@media (max-width: 768px){ 
      .wrap{ 
        width:1170px 
      } 
    }
@media (min-width: 767px){ 
          .wrap{ 
            width:767px 
          } 
        }

或者更好的是，您可以使用 jQuery。 var $widthOfWrap = $('.wrap').width()