Как свернуть панель навигации из центра страницы в верхнюю панель навигации - PullRequest
Новая
       73

Как свернуть панель навигации из центра страницы в верхнюю панель навигации

0 голосов
/ 06 мая 2020

Как я могу разместить свои навигационные ссылки в ul, который проходит через страницу БЕЗ большого изображения, но затем переместить те же самые ссылки в свернутую навигационную панель с помощью кнопки в верхней части страницы? Все, что я вижу, - это варианты, для которых требуется, чтобы навигационные ссылки располагались в верхней части страницы или сбоку. Вот мой код. 

<body>

<img class="img-fluid" src="img/latestlogo3.png" alt="header-img">

<div class="container">

 <br>

  <ul class="nav justify-content-center">
    <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">Who is Gustav Mahler?</a>
    </li>
     <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">EPISODES</a>
    </li>
    <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">ABOUT</a>
    </li>
    <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">CONTACT</a>
    </li>
  </ul>

 <hr>

 <br>

 <div class="row">
    <div class="col-sm mb-4 center-block">
        <img src="img/episode.png" class="img-fluid"/>  
    </div>
    <div class="col-sm mb-4 center-block">
        <img src="img/episode.png" class="img-fluid"/>
    </div>
</div>

</body>

1 Ответ

1 голос
/ 07 мая 2020

Используйте помощник по отображению:

https://getbootstrap.com/docs/4.3/utilities/display/

Чтобы скрыть элементы, просто используйте класс .d-none или один из .d- {sm, md, lg, xl} -none классы для любого варианта адаптивного экрана.

Итак, вам нужны две панели навигации, одна для больших размеров, а другая для меньших.

...