Question

我正在使用Bootstrap网格显示一个产品页面，这些产品以动态方式添加到其中。每个产品都有一个col-md-3类，每行有4个产品。问题是当行已满并且添加了新产品（因此必须开始新行）时，产品不会放在新行的开头，而是放在其他位置（第二或第三位置）。你可以[看这里的截图] [1]显示问题。

Answer 1

<div class= "row">
    <div class="col-xs-6 col-md-3">

   <a href="/collections/summer-collection/products/another-skirt" class="grid__image">
  <div class="my-reveal">
  <img src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0345_123483_large.jpg?v=1486835408" alt="Another Skirt">
  <img class="hidden" src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0353_123483_large.jpg?v=1486835408" alt="Another Skirt">
  </div>
  </a>

   <p class="h4 front-title">
     <a href="/collections/summer-collection/products/another-skirt">Another Skirt</a>
    </p>
    <p>
    <span class="visually-hidden">Regular price</span>
    <br><s>440,00 lei</s>
    </p>

   </div>
</div>

Bootstrap网格项在下一行错误地对齐

1 个答案: