Bootstrap navbar скрыть содержимое на #link

Question

У меня проблема с элементом navbar-fixed-top. Он скрывает содержимое от контейнера.

Это распространенная проблема, решаемая путем добавления следующего кода css:

body { padding-top: 70px; }

Теперь, когда я загружаю свою страницу, контейнер не скрыт по Навбар больше. Проблема в том, что я хочу go для определенного элемента c на странице с href=#item. В этом случае элемент всегда скрыт панелью навигации.

Я создал простой код на Codeply , который показывает эту проблему. В этом примере, когда я нажимаю «Перейти к test3», элемент <h2 class="font-weight-light">TEST3</h2> скрывается панелью навигации.

Вот код ниже:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
    <div class="row">
        <div class="col">
            <div class="sidebar-sticky" id="menu">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#test">Go to test1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test2">Go to test2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test3">Go to test3</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test4">Go to test4</a>
                    </li>
                </ul>
          </div>
        </div>
        <div class="col">
            <div id="test">
                <h2 class="font-weight-light">TEST1</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test2">
                <h2 class="font-weight-light">TEST2</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test3">
                <h2 class="font-weight-light">TEST3</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test4">
                <h2 class="font-weight-light">TEST4</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
        </div>
    </div>
</div>

Answer 1

В текущем случае вы можете добавить padding к элементам div, за которыми следует h2 (например, «Test3»). Добавление div h2 { padding-top: 70px; } делает это для вашей текущей структуры. Однако, чтобы не зависеть от h2 после div при дальнейшей разработке проекта, вы также можете создать собственный класс, к которому применяется правило padding-top, и добавить его к тем элементам, к которым он относится. необходим. Надеюсь, это поможет.

Answer 2

Из вопроса Исправлен заголовок страницы, перекрывающий якоря на странице , решение не является принятым ответом, а находится в ответах. Поэтому я повторю это здесь.

Я добавил этот класс в файл css:

.hreflink::before {
  content: "";
  display: block;
  height: 70px; /* fixed header height*/
  margin: -70px 0 0; /* negative fixed header height */
}

, а затем я определил каждый элемент, который я хочу go, с которым этот класс, например:

<div id="test3" class="hreflink">

Answer 3

Вот решение

 body { 
     padding-top: 70px; 

 }

 #test{

     padding-top:90px;



 }

 #test2{
      padding-top:90px;

 }


  #test3{
      padding-top:90px;

 }


  #test4{
      padding-top:90px;

 }