Bootstrap底部导航栏与视频内容重叠

Question

在我的代码中，我有两个部分。

视频列表

{this.state.videos.map((video) => {  return <VideoListItem key={video.etag} video={video} /> })}

和底部固定的导航栏

 <Navbar class="fixedBar" bg="light" fixed="bottom"> {/*Bootstrap*/}
     <Navbar.Brand href="#home"></Navbar.Brand>
     <Nav class="mr-auto right30 navbar-nav" >
         <Button variant="primary" class="pull-left" text-align="right" >Select</Button>
     </Nav>
</Navbar >

但是，当内容映射出来时，导航栏会与内容重叠。我假设这是因为它先渲染它，然后再渲染所有视频。您是否有解决此重叠问题的建议？我认为导航栏应该在每次绘制视频时重新渲染，这样它才能知道底部是什么。但这可能是不必要的。

我尝试将其包装在div中，并添加padding-bottom。只有有效的代码才能删除fixed="bottom"，但是随后我需要弄清楚如何使导航栏在组件的任何位置都可见。

是否存在“重新渲染”的修复程序，还是应该只是从头开始创建新的导航栏？