Bootstrap 4 图文并排居中布局优化及响应式需求问询

Got it, let's clean up your code to meet your needs: vertical/horizontal centering, mobile-only stacking, and as little redundancy as possible. Your original code uses a lot of inline margins/paddings and fixed widths that can break responsiveness—we'll replace those with Bootstrap's native classes for consistency and simplicity.

Key Improvements: #

• Removed nested unnecessary containers and messy inline styles
• Used Bootstrap's align-items-center on rows to automatically vertically center images and text
• Set column breakpoints to md so rows stack only on mobile (small screens)
• Added flex classes to center images horizontally in their columns
• Replaced hardcoded pixel spacing with Bootstrap's responsive spacing utilities
• Removed fixed text widths to keep the layout adaptable across screen sizes

Final Clean Code: #

<div class="container py-5">
  <div class="mb-4">
    Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome!
  </div>

  <!-- Image + Text Row 1 -->
  <div class="row align-items-center my-4">
    <div class="col-md-3 d-flex justify-content-center">
      <img src="./images/1.png" height="150" alt="Image 1">
    </div>
    <div class="col-md-9 ps-4">
      <p>This is my super super super super dummy dummy text text text text.</p>
    </div>
  </div>

  <!-- Image + Text Row 2 -->
  <div class="row align-items-center my-4">
    <div class="col-md-3 d-flex justify-content-center">
      <img src="./images/2.png" height="150" alt="Image 2">
    </div>
    <div class="col-md-9 ps-4">
      <p>This is my super super super super dummy dummy text text text text.</p>
    </div>
  </div>

  <!-- Image + Text Row 3 -->
  <div class="row align-items-center my-4">
    <div class="col-md-3 d-flex justify-content-center">
      <img src="./images/Change.png" height="150" alt="Change Image">
    </div>
    <div class="col-md-9 ps-4">
      <p>This is my super super super super dummy dummy text text text text</p>
    </div>
  </div>
</div>

Breakdown of Critical Classes: #

• container py-5: Wraps content in Bootstrap's responsive container and adds vertical padding for breathing room
• row align-items-center: Ensures all columns in the row sit perfectly vertically centered (no more manual padding hacks!)
• col-md-3/col-md-9: On screens ≥768px (medium size), columns split 3/12 and 9/12 width. On smaller mobile screens, each column automatically stacks to full width.
• d-flex justify-content-center: Turns the image column into a flex container, centering the image horizontally without extra styles
• my-4: Adds consistent top/bottom margin to each row for uniform spacing
• ps-4: Adds left padding to text columns (replaces inline padding-left:40px for cleaner, maintainable code)

This setup is fully responsive, easy to tweak, and checks all your boxes for centered alignment and mobile-friendly stacking.

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