Question

我正在HTML页面上显示产品。有些产品的细节较大，有些则较小。当我显示这些产品时，具有较大细节的产品div的高度要大于具有较小细节的产品的高度。为了解决此问题，我为div分配了高度，但是它没有用，因为当我在移动视图中打开页面时，产品从其div溢出的详细信息。然后，我尝试使用媒体查询来更改div的类：如果宽度<991px，请将col-md-6更改为col-md-12。我使用jquery进行了此更改，但它只影响第一个div。 此问题的标准解决方案是什么？。

$(window).resize(function() {
  if ($(window).width() < 991) {
    alert("window");
    $( "product612" ).removeClass( "col-md-6" ).addClass( "col-md-12" );
    $("product612").toggleClass('col-md-6 col-md-12');
  }
});

.product{
  background-color: rgba(92, 90, 90, 0.096);
  word-wrap:break-word;
  position: relative;
  text-align: center;
  padding: 40px 20px;
  margin: 15px 0px;
  height: 433.4px !important; 
}


.product:after {
  content: "";
  background-color: rgba(2, 2, 2, 0.781);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: -1;
  -webkit-transition: 0.2s width;
  transition: 0.2s width;
  
}

.product:hover p{
  color: white !important;
}

.product:hover:after 
{
  width: 100%;
  height: auto;
}

.product p{
  color: rgb(80, 80, 80) !important;
  font-size: 17px;
  line-height: 18px;
  font-weight: 500;
  font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
 
.product>img {
  height: 150px;
  width: 250px;
  margin: 0px auto 12px auto;
  margin-left: auto;
  border-radius: 15%;
}

<div class="container" >
    <div class="row">

      <div class="section-header text-center" >
          <h1 class="glow title">Products</h1>
      </div>

      {% for product in products %}
      
        <div id="product612" class="col-md-6 col-sm-12 col-xs-12">
            <div class="product">
            <img src="{{product.image.url}}" class="img-responsive " alt="product picture">
            <h4>{{product.name}}</h4>
            <p>{{product.detail}}</p><br>
            </div>
        </div>
      {% endfor %}
    </div>
  </div>

Answer 1

在回答您实际提出的问题之前，有两件事：

Bootstrap的网格系统应该可以避免这样的事情，因此您可能想用MCVE发表一个新问题，询问正在做的事情，并询问如何避免更改col-md-x类。
id的必须在文档中必须是唯一的，因此这是您首先需要解决的问题。

尽管回答了您提出的问题：

您已经说过：

我使用jquery进行了此更改，但它只影响第一个div。

但您显示的代码使用

$( "product612" ).removeClass( "col-md-6" ).addClass( "col-md-12" );
$("product612").toggleClass('col-md-6 col-md-12');

这什么都不会做，因为$("product612")不会匹配任何内容（您的意思是$("#product612")，如果您看到一个变化，我想您一定曾经使用过它）。

使用类而不是id，然后在您的resize函数中：

$(window).resize(function() {
  var isNarrow = $(window).width() < 991;
  $(".the-class")
      .toggleClass("col-md-6", !isNarrow)
      .toggleClass("col-md-12", isNarrow);
});

为此，您可以使用matchMedia而不是resize，因此，您仅在大小更改确实很重要时才运行回调，而不是在每次微小的更改时都运行回调，例如：

(function() {
    function widthUpdate(mqle) {
          $(".the-class")
              .toggleClass("col-md-6", !mqle.matches)
              .toggleClass("col-md-12", mqle.matches);
    }
    var mql = window.matchMedia('(max-width: 990px)');
    mql.addListener(widthUpdate);
    widthUpdate(mql);
})();

第一次连接侦听器时不会触发它，因此您必须手动执行此操作。

（鉴于Pete和Bootstrap物品所标识的duplicate，我首先删除了此内容。但随后决定也许对以后的某个人有用。

但是，我想从中获取任何代表，所以我将其标记为社区Wiki。）

如何使用jquery

1 个答案: