如何为API返回的src为imageUrl的图片设置样式并调整列间距

这个需求完全可以实现，问题核心是当前栅格列的响应式规则设置不合理、固定内边距适配性差，具体调整方案如下：

问题原因 #

1. 你当前统一使用col-4类，意味着所有尺寸的屏幕下都强制每行显示3列，中等、小尺寸屏幕视口宽度较窄，三列的可用宽度被压缩，自然会出现图片拥挤的情况
2. 手动写死padding-right:20px的固定值，没有适配不同屏幕的尺寸，还会破坏Bootstrap栅格默认的gutter对齐规则
3. 单独使用img-fluid没有加最小宽度限制，当列宽被压缩时，图片会跟随列宽无限缩小

调整方案 #

1. 替换固定列宽为响应式栅格列 #

保留移动端正常的3列布局，中等屏幕调整为每行2列，大屏幕恢复3列，适配不同视口宽度，修改后代码如下：

<div class="container">
  <div class="row" style="margin-top: 20px;">
    <!-- 响应式列规则：移动端col-4（3列）、中等屏col-md-6（2列）、大屏col-lg-4（3列） -->
    <div class="col-4 col-md-6 col-lg-4 px-2 px-md-3">   
      <img [src]="x.imageUrl" alt="images" class="img-fluid" style="min-width: 100px;"/>
    </div>
  </div>
</div>

2. 用Bootstrap原生工具类实现响应式内边距 #

删除手动写死的padding-right:20px，改用Bootstrap spacing工具类px-2 px-md-3，实现移动端左右内边距0.5rem、中等屏幕以上左右内边距0.75rem的自适应效果，自动适配不同屏幕的间距需求。

3. 修复img-fluid图片过小问题 #

给图片加上min-width限制，示例中设置的是min-width: 100px，数值可以根据你的设计要求调整，既保留img-fluid的响应式缩放特性，又避免图片在窄列下被压缩到过小。

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