Bootstrap响应式布局适配笔记本平板手机失效问题求解

• 直接将Bootstrap栅格类col-*挂载到<img>标签上，不符合栅格系统的使用规范，栅格类应当作用于外层列容器，而非内容元素
• 自行添加的内联margin、padding样式覆盖了Bootstrap栅格的默认gutter规则，导致响应式断点样式无法生效
• 未给图片添加自适应宽度类，图片宽度无法跟随列容器尺寸变化

• 移除所有自行编写的内联样式，避免覆盖Bootstrap默认规则
• 为每张图片新增外层div容器，将栅格类、间距类挂载到该外层容器上
• 给图片添加w-100、img-fluid类，保证图片自适应容器宽度，不会变形溢出
• 用Bootstrap原生的gx-3类控制列左右间距，pt-3类控制列顶部间距，两者生效后间距均为16px，刚好符合15-20px的均匀间距要求

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<body>
  <article class="container-fluid">
    <section class="row gx-3">
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog1.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog2.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog3.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog4.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog5.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog6.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog7.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog8.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog9.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog10.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog11.jpg" class="w-100 img-fluid">
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 pt-3">
        <img src="dog12.jpg" class="w-100 img-fluid">
      </div>
    </section>
  </article>
</body>

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