移动端/平板端Div堆叠问题求助（Bootstrap 5）

核心问题分析 #

• 直接使用col-6会强制所有屏幕尺寸都平分两列，不会自动触发移动端堆叠效果
• 自定义CSS里的固定宽度width:420px，在小屏幕会超出容器宽度，导致元素被压缩变形
• 媒体查询未生效，一是因为Bootstrap内置样式优先级高于自定义样式，二是HTML中存在类名拼写错误（lign-items-end应为align-items-end）

修复步骤 #

1. 改用Bootstrap响应式栅格类（推荐方案） #

无需手动写媒体查询，直接使用Bootstrap的断点栅格类，实现平板及以上屏幕分两列、移动端自动堆叠：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="features">
  <div class="container">
    <div class="row">
      <!-- 用col-md-6替代col-6：平板及以上分两列，移动端自动堆叠 -->
      <div class="feature_right col-md-6 d-flex align-items-center justify-content-start">
        <div class="section_title">
          <h1>SHOP DEALS</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, voluptatem minus harum delectus aliquid quidem inventore, error assumenda quisquam eveniet consequatur sequi. Odio amet cumque vitae minima nihil beatae blanditiis voluptatem, est eos quis perspiciatis deserunt debitis id, recusandae magnam. Optio et voluptatum ipsam illo ab nemo ea aliquid cum?</p>
        </div>
      </div>
      <!-- 修复类名拼写错误：lign-items-end → align-items-end -->
      <div class="feature_left col-md-6 d-flex align-items-end justify-content-end">
        <div class="feature_image">
          <!-- 用img-fluid实现图片响应式缩放 -->
          <img src="images/LRDGWindyCityWipeoutsWhite.jpg" alt="" class="img-fluid">
        </div>
      </div>
    </div>

    <!-- More Info button -->
    <div class="row">
      <div class="col text-center">
        <div class="button features_button"><a href="#">See More Info</a></div>
      </div>
    </div>
    <!-- More Info button -->
  </div>
</div>

2. 移除固定宽度，让内容自适应容器 #

删除自定义CSS中的固定宽度设置，避免小屏幕溢出：

.features {
  background: #FFFFFF;
  padding-top: 92px;
  padding-bottom: 100px;
}

.features_title_container {
  z-index: 1;
}

.features_title {
  font-size: 28px;
  font-weight: 700;
  color: #888888;
  text-transform: uppercase;
  line-height: 1.2;
}

/* 移除固定width:420px，改用max-width限制最大宽度，小屏幕自动收缩 */
.feature_right p {
  font-size: 18px;
  max-width: 420px;
}

.feature_left {
  padding-bottom: 40px;
  max-width: 420px;
}

/* 可选：自定义移动端样式（放在Bootstrap CSS之后引入） */
@media (max-width: 768px) {
  .feature_right,
  .feature_left {
    text-align: center;
    padding: 15px;
  }

  .feature_image {
    display: flex;
    justify-content: center;
  }
}

3. 关键注意事项 #

• 栅格类遵循Bootstrap响应式规则：col-*对应超小屏，col-sm-*对应小屏，col-md-*对应平板，col-lg-*对应桌面
• 必须添加d-flex类，align-items、justify-content等对齐属性才会生效
• 图片使用img-fluid类实现响应式，无需手动控制宽高
• 自定义样式若需覆盖Bootstrap，需放在Bootstrap CSS文件之后引入，或使用更具体的选择器提高优先级

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