Bootstrap 4如何按不同列尺寸条件控制图片居中？

当然有办法啦！针对Bootstrap 4的这个需求，你可以用两种简单的方式实现，完全不用复杂的JS：

方案1：利用Bootstrap 4内置的响应式工具类 #

Bootstrap 4自带了适配不同屏幕的工具类，刚好能精准匹配你的需求：

方法A：文本对齐类（适合行内/行内块图片） #

给包含图片的列添加组合类：text-center text-md-left

• text-center：默认在xs（<576px）和sm（≥576px且<768px）屏幕下，让列内的图片居中
• text-md-left：从md（≥768px）屏幕开始，将图片恢复左对齐（也就是你要的“不居中”效果）

示例代码：

<div class="row">
  <div class="col-xs-12 col-sm-5 col-md-4 col-lg-3 text-center text-md-left">
    <img src="your-image-path.jpg" alt="描述图片">
  </div>
</div>

方法B：外边距类（适合块级图片） #

如果你的图片是块级元素（比如加了img-fluid类），可以给图片直接加响应式外边距类：mx-auto mx-md-0

• mx-auto：xs和sm屏幕下，图片左右外边距自动，实现居中
• mx-md-0：md及以上屏幕，取消左右外边距，让图片回到默认对齐方式

示例代码：

<div class="row">
  <div class="col-xs-12 col-sm-5 col-md-4 col-lg-3">
    <img src="your-image-path.jpg" alt="描述图片" class="img-fluid mx-auto mx-md-0">
  </div>
</div>

方案2：自定义CSS媒体查询（适配更灵活的场景） #

如果需要更定制化的控制，你可以自己写CSS媒体查询，完全匹配Bootstrap 4的断点规则：

/* 匹配xs和sm屏幕（<768px），让图片居中 */
@media (max-width: 767.98px) {
  .responsive-center-img img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 匹配md及以上屏幕（≥768px），取消居中 */
@media (min-width: 768px) {
  .responsive-center-img img {
    margin-left: 0;
    margin-right: 0;
  }
}

然后给列添加自定义类即可：

<div class="row">
  <div class="col-xs-12 col-sm-5 col-md-4 col-lg-3 responsive-center-img">
    <img src="your-image-path.jpg" alt="描述图片">
  </div>
</div>

小提示：用767.98px而不是768px是为了和Bootstrap 4的断点逻辑完全对齐，避免出现临界尺寸下的样式冲突。

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