在较小的屏幕（手机、平板电脑）上查看时，将 div 堆叠在一起

Question

我的 div 一直有问题。在移动设备上查看时，它们似乎都缩小了，而不是堆叠在一起。我希望你能帮我找出问题所在。我正在使用 Bootstrap 5，我对此还很陌生，因此我们将不胜感激。

.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;
}

.feature_right p {
  font-size: 18px;
  width: 420px;
}

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="features">
  <div class="container">
    <div class="row">
      <div class="feature_right col-6 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>
      <div class="feature_left col-6 lign-items-end justify-content-end">
        <div class="feature_image d-flex flex-column align-items-end justify-content-end">
          <img src="images/LRDGWindyCityWipeoutsWhite.jpg" alt="">
        </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>

我尝试使用媒体查询，但即使我最小化窗口或尝试检查它并使用模拟器，它仍然无法工作：

.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;
}

.feature_right p {
  font-size: 18px;
  width: 420px;
}

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


@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }

  .feature_right,
  .feature_left {
    width: 100%;
    text-align: center;
    padding: 15px;
  }

  .feature_right p,
  .feature_left {
    width: 100%;
  }

  .feature_image {
    justify-content: center;
    align-items: center;
  }

  img {
    width: 100%;
    /* Ensure the image is responsive */
    max-width: 300px;
    /* Optional: Limit max image width */
    height: auto;
    /* Maintain image aspect ratio */
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="features">
  <div class="container">
    <div class="row">
      <div class="feature_right col-6 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>
      <div class="feature_left col-6 lign-items-end justify-content-end">
        <div class="feature_image d-flex flex-column align-items-end justify-content-end">
          <img src="images/LRDGWindyCityWipeoutsWhite.jpg" alt="">
        </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>

Answer 1

很难理解您真正面临的问题以及您到底需要什么解决方案。

通过理解您试图表达的意思，并通过分析您的代码，我了解到您的文本尺寸正在缩小，而不是占据整个宽度的文本，并且不包裹文本，而是保持相同的宽度和缩小尺寸

问题

预期的解决方案

没有添加图像来降低复杂性，但它也与图像配合得很好

问题是您没有在代码的

<head>

部分添加以下标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

将上述标签添加到代码的

<head> ... </head>

部分

这个标签负责创建响应式设计，即根据屏幕宽度调整元素，了解更多

希望这就是您正在寻找的内容，任何相关疑问，请随时询问