Question

我正在使用Bootstrap，div是每列（col-md-4）的4列。基于带有12列的Bootstrap，这意味着在PC媒体屏幕中，每行将有三个div。低于991px标准，每个4列覆盖整个屏幕。请看截图：

但是，当屏幕尺寸介于600px和990px之间时，我希望4列仅覆盖屏幕的50％。意思是每行有两个div。这是我成功的事情，但也存在一些问题。

以移动肖像加载页面（大约<530px）时，所有内容都正确加载。 div不会相互叠加。

在移动横向或ipad肖像（大约> 740px）加载页面时，所有内容都正确加载。 div不会相互叠加。

将屏幕从移动人像切换到移动状态或与其相反时，它开始变得奇怪。 div显然是相互重叠的。

我想要的效果是使用以下 CSS ：

添加

@media screen and (min-width: 991px) and (max-width: 1200px) { #isotope-list img { height: 100%; } }

@media screen and (min-width: 600px) and (max-width: 990px) { #isotope-list .col-md-4 { width: 50%; } #isotope-list img { height: 100%; } }

@media screen and (max-width: 599px) { #isotope-list img {  height: auto; }}

当删除这个CSS时，它会回到标准的Bootstrap，并且没有div相互重叠。这意味着我的CSS和Bootstrap之间的连接肯定有问题。这意味着应该添加一些东西以防止这种情况发生。

该网站可在此处找到：http://goo.gl/9IsTIl

如果需要，这是HTML / PHP：

<div class="col-md-12">
    <div id="isotope-list">    
            <div class="item col-md-4"> 
                <div class="content grid lefttext">
                    <figure class="effect-lily">
                        <!-- image -->
                        <figcaption>
                        <!-- caption -->
                        </figcaption>           
                    </figure>     
                </div> 
            </div>
        </div>
</div>

修改可能与CSS交互的脚本：http://goo.gl/NnLwgo

编辑2： 这是我在手机上的Android浏览器中从肖像到风景时得到的以下内容：

Answer 1

原因是，当屏幕降低height: auto时，您已在img上设置了600px。

您的代码：

@media screen and (max-width: 599px) {
  #isotope-list img {
    height: auto;
  }
}

因此，当同位素重新排列您的元素时，它将无法知道您的图像大小，这将导致错误计算位置。

要解决此问题，请删除height: auto，然后删除max-width上设置的.grid figure img，这样可以在转换过程中消除丑陋。

@media screen and (max-width: 599px) {
  .grid figure img {
    max-width: none;
  }
}

剩下的问题是图像会超出容器的宽度，如下图所示。

我可以想到要解决这个问题，就是好好利用isotope events，这样当它完成元素排列后，你就可以为图像添加类并用{{1}设置它}。

e.g。

max-width: 100%

然后在你的最终媒体查询中必须看起来像这样：

var $grid = $('#isotope-list').isotope({...});

$grid.on( 'arrangeComplete', function( event, filteredItems ) {
   $(".grid figure img").addClass("imgArranged");
});

更新 - 添加JS内容

@media screen and (max-width: 599px) { .grid figure img { max-width: none; } .grid figure img.imgArranged { max-width: 100%; } }的设置可以找到here，因此在使用isotope事件时，最好将其写在那里。

在你的情况下添加：

isotope

该文件现在应该如下所示：

  // Add class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

更改媒体屏幕使div重叠

1 个答案: