Блог

Я использую Bootstrap v4.3.1 без каких-либо изменений, и я реализовал выпадающее меню со следующей уценкой:

 <li class="nav-item dropdown">
                                   <a href="#" class="nav-link dropdown-toggle text-dark nav-headlines" data-toggle="dropdown">A</a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/B">B</a>
                                            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/C">C</a>
                                            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/D">D</a>
                                        </div>
                                </li>
 

Я вообще не вносил никаких изменений в код начальной загрузки.
Отображаемый ховер на всех раскрывающихся элементах, по-видимому, частично выводится за пределы справа.
Проблема в том, что класс выпадающих элементов получает это правило width: 100%; , которое, если я отключу в Firefox/Chrome, похоже, решит проблему.

Я попытался пойти не рекомендованным путем, зашел в bootstrap.css и прокомментировал width: 100%; правило. Это не сработало. Проблема в том, что браузер каким-то образом импортирует правило не из bootstrap.css, а из _dropdown.scss, хотя такого файла не существует…

Как мне исправить зависание выпадающих элементов?

Я использую .NET 6, если это имеет значение.

Я также попытался настроить CSS с помощью встроенного CSS, добавленного в DOM, с помощью jQuery, но это также, похоже, не имеет никакого эффекта ( $(".classnamehere").css("width",""); )…

Является ли это ошибкой со стороны Bootstrap???

Как Bootstrap генерирует файлы .scss, которые я могу видеть в браузере, фактически не имея этих файлов?? Я ничего не импортирую из Интернета для начальной загрузки, все локально.

Вот картинка, чтобы визуализировать это: