如何创建带文字的全宽Bootstrap横幅，文字从container起始位置对齐

你可以直接使用修改后的代码，完全匹配你的需求：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 必要元标签 -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous"
  />

  <title>Hello, world!</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    .hero-image {
      background-image: url("你的图片地址");
      min-height: 450px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <!-- 外层流式容器占满整页宽度 -->
  <div class="container-fluid p-0">
    <!-- 取消栅格默认间距 -->
    <div class="row g-0">
      <div class="col-md-6 d-flex justify-content-end" style="background-color: #f5f5f5">
        <!-- 内部嵌套普通container，保证文字对齐全站容器起始位置 -->
        <div class="container py-5">
          <h1>lorem ipsum dollar ismat</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Voluptatibus, quaerat architecto distinctio nam debitis a
            consectetur iusto. Ea temporibus praesentium sint quibusdam mollitia
            fugiat aliquam numquam inventore, dignissimos libero? Obcaecati.
          </p>
        </div>
      </div>
      <div class="col-md-6 hero-image"></div>
    </div>
  </div>

  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"
  ></script>
</body>
</html>

核心改动说明 #

• 外层新增container-fluid流式容器，取消默认边距限制，让整行内容占满整个视口宽度
• 给文字列添加d-flex justify-content-end，内部嵌套普通container，保证文字的起始位置和全站Bootstrap容器的左边缘完全对齐
• 给row添加g-0类，删除栅格默认的列间距，避免文字和图片中间出现空白缝隙
• 优化背景图样式，将background-size改为cover避免图片拉伸，min-height保证小屏堆叠时图片高度不会坍塌
• 自带响应式效果：屏幕宽度小于768px时自动切换为堆叠布局，文字占满整行在上，图片占满整行在下

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