Bootstrap技术咨询：实现20%透明白色圆形及调整Jumbotron上边距

一、用Bootstrap工具类替换内联padding-top:15% #

Bootstrap内置的间距工具类（如pt-*）均基于固定rem值，没有直接对应15%百分比的预设类。如果要严格遵循Bootstrap工具类的使用方式，有两种可行方案：

方案1：自定义Bootstrap风格工具类 #

添加一段符合Bootstrap命名规范的自定义CSS，实现15%的顶部内边距：

.pt-15 {
  padding-top: 15% !important;
}

之后给目标row元素添加pt-15类，替代原内联样式即可，修改后的代码片段如下：

<!-- 替换前 -->
<div class="row align-items-start" style="padding-top: 15% !important;">

<!-- 替换后 -->
<div class="row align-items-start pt-15">

方案2：使用最接近的内置固定值工具类 #

如果不想添加自定义CSS，可以选用Bootstrap内置的pt-5类（对应padding-top: 3rem），但该值为固定单位，在不同屏幕尺寸下的视觉效果与15%百分比会存在差异。

二、实现深色背景上20%透明度白色圆形阴影效果 #

可以结合Bootstrap的定位、背景、圆角工具类实现该效果，步骤如下：

1. 给深色背景容器添加position-relative类，作为圆形元素的定位父级
2. 创建圆形元素，使用rounded-circle实现圆形，bg-white设置白色背景，opacity-20设置20%透明度
3. 通过position-absolute及方位类（如top-*、left-*）调整圆形位置，额外添加自定义阴影增强效果

示例代码：

<!-- 深色背景容器 -->
<div class="bg-dark position-relative" style="min-height: 400px;">
  <!-- 白色透明圆形阴影 -->
  <div class="rounded-circle bg-white opacity-20 position-absolute shadow" style="width: 200px; height: 200px; top: 20%; left: 10%; box-shadow: 0 0 60px rgba(255,255,255,0.25);"></div>
  <!-- 容器内的其他内容 -->
  <div class="text-white p-5">
    <h2>深色背景内容示例</h2>
    <p>这是深色背景上的文本内容</p>
  </div>
</div>

注：Bootstrap内置的shadow类为灰色阴影，若需要白色阴影需自定义box-shadow属性，如示例中的设置。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
/* 自定义Bootstrap风格工具类 */
.pt-15 {
  padding-top: 15% !important;
}
</style>

<div class="container">
  <div class="d-flex flex-wrap align-items-center justify-content-between py-5">
    <div class="d-flex align-items-center col-md-3 mb-2 mb-md-0 nav-brand">
      <p>Something will be here!</p>
    </div>

    <ul class="nav col-12 col-md-auto mb-2 mb-md-0 d-flex align-items-center ms-md-3">
      <li class="px-2">
        <a href="#" class="nav-link px-2">Test 1</a>
      </li>
      <li class="px-2">
        <a href="#" class="nav-link px-2">Test 2</a>
      </li>
      <li class="px-2">
        <a href="#" class="nav-link px-2">Test 3</a>
      </li>
      <li class="px-2">
        <a href="#" class="nav-link px-2">Test 4</a>
      </li>
    </ul>
    
    <div class="col-md-3 text-end nav-btn">
      <a href="#" class="nav-link px-2">Test 5</a>
    </div>
  </div>

  <div class="row align-items-start pt-15">
    <div class="col-md-6">
      <div class="col d-flex flex-column align-items-start">
        <h1>Test 6!</h1>
      </div>

      <p> Hello world </p>
    </div>
  </div>
</div>

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