Bootstrap CSS样式失效，导航栏自定义布局未生效求助

我正在学习制作基础网页，核心HTML代码如下：

<navbar class="navbar navbar-light pip-footer">
  <div class="row">
    <div class="col-3">
      HP 90/90
    </div>
    <div class="col-6">
      LEVEL 1
      <div class="level-progress"></div>
    </div>
    <div class="col-3">
      AP 50/50
    </div>
  </div>
</navbar>

我尝试用以下自定义CSS实现底部固定、内容合理分布的导航栏，但样式并未生效：

.pip-footer{ 
  position: fixed;
  bottom: 0;
  width: calc(100% - 20px);
  margin: 10px;
}

当前导航栏无法按预期实现底部固定，且col-3/col-6/col-3的布局也未正常生效，请求解决该Bootstrap样式失效问题，实现预期的导航栏布局。

解决方案及修改后代码 #

问题根源

1. <navbar>不是标准HTML标签，Bootstrap的navbar组件基于<nav>标签设计，自定义标签会导致样式继承异常。
2. 未设置box-sizing: border-box，导致calc(100% - 20px)的宽度计算因盒模型问题失效。
3. 内部row未占满父容器宽度，且默认列间距干扰布局。

修改后的HTML代码

<nav class="navbar navbar-light pip-footer">
  <div class="row w-100 g-0">
    <div class="col-3 d-flex align-items-center justify-content-start">
      HP 90/90
    </div>
    <div class="col-6 d-flex flex-column align-items-center">
      LEVEL 1
      <div class="level-progress w-100 bg-secondary">
        <div class="bg-primary" style="width: 30%; height: 8px;"></div>
      </div>
    </div>
    <div class="col-3 d-flex align-items-center justify-content-end">
      AP 50/50
    </div>
  </div>
</nav>

修改后的CSS代码

.pip-footer {
  position: fixed;
  bottom: 0;
  width: calc(100% - 20px);
  margin: 10px;
  box-sizing: border-box;
  padding: 8px 0; /* 可选，调整内边距优化视觉效果 */
}

.level-progress {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

关键调整说明

• 替换<navbar>为<nav>：符合Bootstrap组件的使用规范，确保样式正常继承。
• 添加box-sizing: border-box：让元素宽度包含padding和border，避免宽度计算错误导致布局溢出。
• 给row添加w-100和g-0：w-100确保行占满父容器宽度，g-0消除列之间的默认间距。
• 使用Bootstrap flex工具类：d-flex、align-items-center等让内容垂直居中、水平对齐，实现更整齐的布局。

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