Bootstrap 4.0：如何为小屏幕下换行显示的图片添加margin-left？

嘿，我之前刚好遇到过一模一样的场景！你现在的需求很明确：大屏时两张图并排保持现有样式，小屏自动换行后，第二张图要和第一张图左对齐对吧？这里有个简单靠谱的方案，用CSS媒体查询+Flex布局就能搞定，完全符合你的预期逻辑：

第一步：重构HTML结构，用容器包裹图片 #

先把两张图放进一个Flex容器里，这样能更精准地控制它们的排列行为：

<div class="image-group">
  <img src="~/img/1.png" alt="第一张图" />
  <img src="~/img/2.png" alt="第二张图" />
</div>

第二步：写基础样式，实现大屏并排效果 #

用Flex布局实现大屏时的并排，同时保留你原来的间距设置：

.image-group {
  display: flex;
  flex-wrap: wrap; /* 空间不够时自动换行，就是你要的小屏逻辑 */
  gap: 20px; /* 替代原来的margin-right，控制两张图的间距更灵活 */
  margin-top: 15px; /* 把原来的inline margin-top统一放到容器上 */
}

.image-group img:first-child {
  padding-left: 25%; /* 保留你原来的左侧内边距 */
}

第三步：加媒体查询，针对小屏调整第二张图 #

先确定你的图片刚好开始换行的视口宽度（比如假设是768px，你可以根据实际页面调整这个值），在这个断点下给第二张图加上左外边距，让它和第一张图对齐：

@media (max-width: 768px) {
  .image-group img:last-child {
    margin-left: 25%; /* 和第一张图的padding-left值保持一致，确保左对齐 */
    /* 可选：如果想让小屏图片更宽，可以加下面这行 */
    width: calc(100% - 25%);
  }
}

为啥这个方案好使？ #

• Flex的flex-wrap: wrap完美实现了“大屏并排、小屏自动换行”的需求，不用自己写复杂的换行逻辑
• 媒体查询只会在小屏时触发，完全不会影响大屏的原有布局
• 把样式从inline移到CSS里，后期维护起来更方便，也避免了样式混乱

如果你不想用Flex，也可以用inline-block搭配媒体查询来实现，但Flex的布局逻辑更直观，而且现在主流浏览器都支持，用起来更省心~

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