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()

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

1 个答案: