Bootstrap中如何让main容器部分重叠在jumbotron组件上方

你之前的操作走入了两个误区：正padding/margin只能调整元素在正常文档流中的间距，没法实现向上层叠；给jumbotron设置绝对定位会让它脱离文档流，丢失默认全宽特性同时不占据页面高度，自然会变形。

直接用负上margin就能实现需求，不用改动jumbotron的任何属性，也不会破坏它的全宽特性：

• 给main容器添加Bootstrap内置的负上margin类、层级类，保证它显示在jumbotron上方
• 调整负margin的数值控制重叠幅度，数值越大重叠越多

修改后的核心代码如下：

<!-- jumbotron 代码完全不用动 -->
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Jumbotron H text</h1>
    <p>Text</p>
  </div>
</div>

<!-- 仅修改main的类属性即可 -->
<main role="main" class="container position-relative zindex-2 mt-n5">
  <!-- 把原有的my-3改成mb-3，取消正的上margin -->
  <div class="d-flex align-items-center p-3 mb-3 text-white-50 bg-purple rounded box-shadow">
    <div class="lh-100">
      <h6 class="mb-0 text-white lh-100">
        <?php
            if(isset($_SESSION) && isset($_SESSION['login'])){ ?>
            Welcome <?php echo $username; ?>
            </h6>
      <small>Since <?php echo $created; ?></small>
            <?php }else{ ?>
            Please <a href="login.php">Sign in</a> or <a href="register.php">Register</a>
            <?php } ?>
    </div>
  </div>
</main>

如果内置的mt-n1到mt-n5不符合你的重叠需求，你可以直接给main加行内样式自定义数值，比如style="margin-top: -40px;"，自行调整到想要的重叠效果即可。

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