更改媒体屏幕使 div 叠加

Question

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

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

当以移动纵向（大约 < 530 像素）加载页面时，一切都正确加载。 div 不相互叠加。

在移动横向或 ipad 纵向（大约 > 740 像素）加载页面时，一切都正确加载。 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

原因是你在img上设置了height: auto当屏幕变低600px。

您的代码：

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

所以当同位素重新排列你的元素时，它不会知道你的图像大小，这会导致位置计算错误。

解决这个问题就是删除 height: auto，然后删除 .grid figure img 上设置的 max-width，这将消除过渡期间的丑陋。

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

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

我想解决这个问题的方法是充分利用 isotope events 因此当它完成元素排列后，您将 class 添加到图像并设置它与 max-width: 100%.

例如

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

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

那么你的最终媒体查询必须是这样的：

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

  .grid figure img.imgArranged {
    max-width: 100%;
  }
}

更新 - 添加 JS 内容

您的 isotope 的设置可以在 here 中找到，因此在使用 isotope 事件时，将其写在那里是合适的。

在你的情况下添加：

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

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

jQuery(function($) {

  var $container = $('#isotope-list'); //The ID for the list with all the blog posts
  $container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector: '.item',
    layoutMode: 'masonry'
  });

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

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters,#filters-undercat'),
    $optionLinks = $optionSets.find('a');

  $optionLinks.click(function() {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
    var selector = $(this).attr('data-filter');
    $container.isotope({
      filter: selector
    });

    return false;
  });

});

更改媒体屏幕使 div 叠加

Changing media screen makes div overlay

html

css

jquery-isotope

twitter-bootstrap