Scrollspy не работает вообще - пункты меню не выделяются
Предварительно скажу, что я полный новичок в HTML, Bootstrap и CSS - я начал только несколько дней назад.
Я никак не могу заставить Scrollspy работать. Я знаю, что этот вопрос задавался много раз, и я провел часы, просматривая решения, но я не нашел ни одного, которое работает для меня.
Ниже приведено начало моего HTML, до навигатора:
Я добавил тестовый пункт в меню исключительно в целях тестирования. После кода, приведенного выше, у меня есть секция body, которая содержит 3 . Каждая из этих секций соответствует одному из пунктов в моей навигационной системе.
Остальная часть моего кода выглядит примерно так:
<body data-spy="scroll" data-target="#nb" data-offset="50">
<hr style="border-color: white;" >
<section class="cover-thing second" >
<h2 class="p-3" style="text-align: center; color:#499DD0" id='test'>
<b>About Me</b>
</h2>
</section>
После этого раздела я ожидал, что элемент Test моей навигационной панели загорится, когда я прокручу мимо этого класса h2, но ничего не происходит. Остальные разделы отформатированы аналогичным образом.
Полный код можно найти здесь: https://jsfiddle.net/scunden/6om1ukp8/1/
Однако, код не отображается там должным образом, поскольку я работаю с Django. Любая помощь будет очень признательна!