bootstrap 怎么让文字在网页变小的情况下也不会到图片上

在Bootstrap中，如果你希望在屏幕缩小时文字保持不变，而不会覆盖图像，你可以利用CSS的一些特性来实现这一目标。主要有以下几种方法：

1. **浮动**：将文字放在图片的下面，并设置其浮动属性。例如，给包含文字和图片的容器添加`float: left`，然后在旁边添加另一行浮动文本，使其不在图片下方浮动。记得清理一下浮动，通常可以使用`.clearfix`或`&::after{content:"";clear:both;display:block}`来清除。

2. **相对定位**：对文字应用相对定位(`position: relative`)，并使用负`top`值来放置在图片的下方。但是注意，这种方法会影响其他元素的布局，需要谨慎处理。

3. **弹性盒子布局（Flexbox）**：使用Bootstrap提供的Flexbox组件，将文字和图片放在同一个flex容器内，通过设置flex属性（如`align-items: flex-end`）可以让文字自动下移到底部。

4. **响应式网格**：利用Bootstrap Grid系统，在不同屏幕尺寸下，将文字和图片分放在不同的列（column）中。例如，当屏幕宽度小于某个阈值时，文字可以在另一个单独的col中，避免遮盖图片。

示例代码：

<div class="row">
  <div class="col-md-6 text-center">
    <!-- 图片 -->
    <img src="..." alt="...">
  </div>
  <div class="col-md-6">
    <!-- 文字 -->
    <p>这是一段文字，当屏幕变小时会换行或向下滚动。</p>
  </div>
</div>