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

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具有相同的特定大小，则强制响应性断点生效。

这样，我可以把这个“模板”放在页面中的任何地方，结果将根据换行的大小而不是屏幕/窗口的大小而有所不同

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

Answer 1

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

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

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