Bootstrap 4中Row内容覆盖Navbar问题求助

嘿，作为Bootstrap新手遇到这种布局问题太正常啦！我帮你梳理下问题根源和解决办法：

首先得明确：你用的align-items-center工具类是用来控制Row内部元素的垂直对齐的，和Row与Navbar的位置重叠问题完全不搭边哦～咱们重点看这几个方向：

1. 检查Navbar是否用了fixed-top定位 #

如果你的Navbar加了fixed-top类，这个元素会脱离正常文档流，固定在页面顶部，下面的内容（包括Row）会默认从页面最顶端开始渲染，自然就会被Navbar盖住。

解决办法：给body加顶部内边距 #

你可以直接给<body>标签加Bootstrap内置的间距类，或者自定义内边距值：

• 用内置类（适配默认Navbar高度）：

  <body class="pt-5">
  

• 精准匹配Navbar高度（比如默认Navbar高度是56px）：

  <body style="padding-top: 56px;">
  

2. 排查自定义CSS的冲突 #

看看你的自定义CSS里有没有这些坑：

• 给Row设置了负的margin-top，比如.row { margin-top: -20px; }
• 给body重置了padding-top: 0
• 给Navbar设置了position: absolute这类脱离文档流的定位

如果有这些情况，删掉或者调整对应的样式即可。

3. 非fixed定位的Navbar情况 #

如果你的Navbar没有用fixed-top，那可能是Row加了负margin类（比如mt-n3这类），导致Row往上偏移覆盖Navbar。检查Row的类名，去掉负margin相关的类就行。

示例正确结构参考 #

<!-- Navbar部分 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <!-- 其他Navbar内容 -->
  </div>
</nav>

<!-- 页面内容 -->
<div class="container mt-3">
  <div class="row align-items-center">
    <div class="col">
      这里是Row里的内容，不会被Navbar覆盖啦！
    </div>
  </div>
</div>

<!-- 自定义样式适配fixed-top -->
<style>
  body {
    padding-top: 56px; /* 和默认Navbar高度匹配 */
  }
</style>

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