Bootstrap5：如何在断点处缩小元素的右内边距？

问题根因 #

你给图片列加了d-none d-md-block，这会让屏幕小于md断点时图片列直接隐藏，但你说小屏幕下图片列向右扩展，估计是多写了d-none。真正导致列跑偏的核心原因是：图片没做自适应处理，宽度超过了列的尺寸，把列给撑变形了；另外你试的pe-sm-1没生效，是因为断点类用错了，它只对sm及以上屏幕生效，小屏幕不触发。

修复步骤 #

1. 先让小屏幕能显示图片列 #

把图片列里的d-none删掉，不然小屏幕根本看不到图片：

<div class="col-2 column image-col">

要是你本来就只想在md及以上尺寸显示图片，那小屏幕下图片列本就隐藏，你描述的问题就不存在，得检查实际代码是不是和你贴的一致。

2. 给图片加自适应类 #

Bootstrap自带的img-fluid能让图片自动适配父容器宽度，不会撑破列，直接加到图片的类里：

<img src="images/NirvanaNevermindalbumcover.jpg" class="rounded review-img img-fluid" />

3. 调整列的内边距（按需） #

要是想调小屏幕下图片列的右内边距，别用pe-sm-1，直接用不带断点的pe-1（全屏幕生效），或者pe-xs-1（专门针对最小屏幕）：

<div class="col-2 column image-col pe-1">

修复后的完整代码 #

<div class="card mb-3">
  <div class="card-header py-3">
    <div class="row">
      <div class="col-2 column image-col pe-1">
        <img src="images/NirvanaNevermindalbumcover.jpg" class="rounded review-img img-fluid" />
      </div>
      <div class="col-10 column text-col">
        <div class="d-flex justify-content-between album-header">
          <h5 class="card-title"><a href="#">Nirvana - Nevermind</a></h5>
          <p>Avg. Rating: <span class="rating">8.6</span></p>
        </div>
        <div class="d-flex justify-content-between user-header">
          <p class="text-muted">Reviewed by <a class="username" href="#">PunkyBruiser</a> on May 14, 2022</p>
          <p class="text-muted">User Review: <span class="added-rating">8</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

重点提醒 #

• img-fluid是关键：它给图片设置了max-width:100%; height:auto;，不管图片本身多大，都不会超出列的宽度，从根源解决列被撑变形的问题。
• 列的显示类别乱加：d-none是默认隐藏属性，要小屏幕显示图片就必须删掉，不然所有调整都是白忙活。
• 内边距类要看断点规则：Bootstrap的断点类后缀（比如-sm）是指该断点及以上生效，小屏幕要单独调整就得用不带断点的类。

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