如何在Bootstrap中将div置于图片右侧而非下方？

直接用Bootstrap自带的网格布局组件就能搞定这个问题，不用依赖inline-block这类原生CSS样式，具体修改如下：

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<div class="container mt-4">
  <div class="row align-items-center">
    <!-- 图片容器，中等屏幕及以上占8列 -->
    <div class="col-md-8">
      <img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="width: 100%;">
    </div>
    <!-- 卡片容器，中等屏幕及以上占4列 -->
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Have Questions?</h5>
          <a href="#" class="btn btn-primary">FAQ</a>
          <a href="#" class="btn btn-primary">Contact Us</a>
        </div>
      </div>
    </div>
  </div>
</div>

关键说明 #

• row是Bootstrap的弹性布局容器，内部的col-md-8和col-md-4会在屏幕宽度≥768px时自动并排，小于该宽度时自动堆叠，兼顾响应式需求
• align-items-center让图片和卡片在垂直方向居中对齐，视觉更协调
• 去掉了图片原有的margin:auto和display:block，改用网格容器控制位置，避免布局冲突
• container和mt-4是优化布局的辅助类，让内容更规整，间距更合理

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