如何在形状的左上角/右上角放置大数字与对应小文本？

要把大数字移到形状的左上角，你之前的思路被Bootstrap的col分栏限制了——数字被锁在右侧的col-md-6容器里，浮动和justify-content调整都只能在这个小容器内生效，自然没法跑到整个li的左上角。试试用绝对定位实现，步骤如下：

修改后的代码 #

HTML（用Bootstrap内置类更规范） #

<li class="list-group-item px-3 border-0 rounded-3 mb-2 position-relative" style="background-color: #8A8583;">
  <!-- 绝对定位的数字 -->
  <h1 class="position-absolute top-0 start-0 ms-3" style="font-size: 7rem; margin: 0; opacity: 0.3; color: beige;">03</h1>
  <div class="row">
      <div class="col-md-12 ps-5">
          <h2 class="text-light fw-bold my-auto">I also code lots of side-projects that are either websites or applications using a wide variety of languages.</h2>
      </div>
  </div>
</li>

关键调整说明 #

• 给li添加position-relative：让内部绝对定位的元素以整个形状为基准定位
• 数字h1用position-absolute top-0 start-0：直接固定到左上角，ms-3微调左边距避免贴边
• 文本容器加ps-5：给左侧留足够内边距，防止被数字遮挡
• 可选加opacity: 0.3：让数字作为背景装饰，视觉上不抢文本的焦点

为什么之前的方法没用？ #

你用col-md-6把区域分成了左右两栏，数字被限制在右侧半区内，浮动属性只能在这个小容器里移动，根本触不到整个形状的左上角。绝对定位脱离了文档流，不受col布局的限制，才能直接定位到父容器的角落。

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