如何用Bootstrap将元素对齐至页面边缘？Express布局问题

核心问题 #

你使用的container类自带左右内边距，再加上card-body的默认内边距，导致内容被限制在中间区域，无法贴合页面边缘。

修复步骤 #

1. 替换容器类型：将最外层的container改为container-fluid，这个类会让容器占满整个视口宽度，消除左右方向的默认内边距。
2. 清除多余内边距：给card-body添加p-0类，移除它默认的内边距，让内部内容可以贴近边缘。
3. 调整绝对定位元素：左侧的标题使用了绝对定位，添加left-0类让它对齐到最左侧，避免默认的偏移。
4. 保留合理间距：给右侧的段落和按钮添加适当的边距类（比如pe-5、ms-5），避免内容完全贴边显得拥挤，匹配设计预期的布局效果。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<section class="container-fluid">
  <div class="card border-0">
    <div class="card-body p-0">
      <div class="row">
        <div class="col-lg-3 position-relative">
          <div class="position-absolute left-0">
            <h2 class="font-bold heading h3 pt-3 pb-4 ps-5">
              <img src="./images/surprise.png" alt="">
              <span>درباره من</span>
            </h2>
          </div>
          <p class="small text-secondary ps-5">اطلاعات بیشتر در مورد من و فعالیت من</p>
        </div>
        <div class="col-lg-9">
          <p class="pe-5">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی
            می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید
            داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
          <a href="#" class="btn btn-main ms-5">
            <img src="https://via.placeholder.com/80" alt="دانلود">
            <span>دانلود رزومه</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

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