内容页底部Submit按钮与Bootstrap页脚重叠问题求助

1. 缩小页脚高度 #

当前页脚内部容器的p-3类会给上下左右各添加1rem内边距，是页脚过高的核心原因。替换为更小的内边距类并调整文字大小，即可压缩页脚高度：

修改页脚代码：

<footer class="bg-light text-center footer text-lg-start">
  <!-- Copyright -->
  <div class="text-center p-1" style="background-color: rgba(0, 0, 0, 0.2); font-size: 0.8rem;">
    <span class="text-dark"> © Copyright 2023 Test Company | Version 1.0</span>
  </div>
  <!-- Copyright -->
</footer>

• p-1将内边距缩小至0.25rem，大幅降低垂直高度
• font-size: 0.8rem缩小版权文字，进一步压缩页脚空间

2. 修复按钮被遮挡问题 #

按钮被遮挡的主要原因是内容区底部间距不足，加上float:right导致容器高度塌陷，main的底部内边距未生效。可通过以下两种方式解决：

方式一：给按钮容器清除浮动并增加底部外边距 #

修改Submit按钮所在容器代码：

<div class="form-group" style="margin-top:20px; margin-bottom:40px;" >
  <input style="float: right;" type="submit" value="Submit" class="btn btn-primary" />
  <!-- 清除浮动，避免容器高度塌陷 -->
  <div style="clear: both;"></div>
</div>

• 移除按钮自身的margin-bottom:20px，改为给容器添加margin-bottom:40px，确保按钮下方有足够空间
• 添加清除浮动的元素，让容器正确包裹按钮，保证内容区底部内边距生效

方式二：全局调整内容区底部内边距 #

如果希望所有页面内容区都预留足够底部空间，可修改main的类：

<main role="main" class="pb-8">
  @RenderBody()
</main>

将pb-5替换为pb-8（Bootstrap间距类，对应2rem内边距，比原1.25rem更大），让内容区底部自动留出不被页脚遮挡的空间。

额外优化：修复导航栏布局问题 #

当前导航栏使用position:absolute会导致内容区顶部被遮挡，建议修改定位方式并给内容区添加顶部内边距：

<header>
  <nav class="navbar" style="background-color: #264653; width:100%; position:sticky; top:0; z-index:1000;">
    <!-- 导航栏内部代码保持不变 -->
  </nav>
</header>
<div class="container-bg pt-5"> <!-- 添加pt-5类，避免内容被导航栏遮挡 -->
  <div class="container">
    <main role="main" class="pb-8">
      @RenderBody()
    </main>
  </div>
</div>

修改后导航栏会固定在顶部，同时内容区不会被遮挡，整体布局更合理。

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