Angular4中如何为多行商品列表设置行间距

嘿，我来帮你搞定这个商品列表行与行之间没有间距的问题！从你给出的代码来看，你用了Bootstrap的网格系统布局商品卡片，但默认情况下Bootstrap的列元素没有上下外边距，所以当列表换行后，上下两行的卡片会紧紧挨在一起。下面给你两个实用的解决方案：

方案一：使用Bootstrap内置间距类 #

如果你用的是Bootstrap 4+，直接给每个商品列添加mb-3类（mb是margin-bottom的缩写，3代表间距大小，你可以根据需求换成mb-2、mb-4等），这样每个卡片底部都会有固定间距，多行时自然就分开了。

修改后的HTML代码：

<div class="row"> 
  <div class="col-sm-4 column mb-3" *ngFor="let product of products;let i =index;"> 
    <div class="card"> 
      <div class="card-img-top card-img-top-250 one"> 
        <img routerLink="/my-cart" class="img-fluid" [src]="product['IMAGE_PATH_1']" alt="image"> 
        <!-- 你剩下的图片和卡片内容 -->
      </div>
      <!-- 卡片的其他详情区域 -->
    </div>
  </div>
</div>

方案二：自定义CSS样式 #

如果不想依赖Bootstrap的内置类，也可以自己给.column类添加底部外边距，灵活性更高：

在你的组件CSS或者全局样式文件中添加：

.column {
  margin-bottom: 1.5rem; /* 可以根据视觉需求调整这个值 */
}

这样所有带.column类的元素底部都会有间距，完美解决行与行之间的紧凑问题。

本质上这两种方法都是给每个商品卡片容器添加底部外边距，让换行后的卡片之间产生空隙，你可以根据自己的项目风格选其中一种就行~

内容的提问来源于stack exchange，提问作者Nikson