Bootstrap Нижний Навбар перекрывает видео контент - PullRequest
0 голосов
/ 29 апреля 2020

В моем коде у меня есть два компонента.

Видеолист

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

и фиксированная нижняя панель Navbar

 <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", но тогда мне нужно выяснить, как сделать панель навигации видимой из любой точки компонента.

Есть ли исправление для «повторного рендеринга», или я должен просто создать новый navbar с нуля?

enter image description here enter image description here

...