Bootstrap 4 navbar не переключается

Question

H ie, я пытался расширить свою отзывчивую навигационную панель с помощью переключателя данных, однако он не работает, посмотрел на другие связанные вопросы, но я рассмотрел эти проблемы, возможно, подойдет вторая пара глаз, моя консоль давая мне «ожидаемую строку».

Я уже включил свой jquery, bootstrap комплект и bootstrap js в этом порядке. Используя bootstrap 4, кстати, спасибо:)

                <nav class="navbar navbar-expand-md navbar-light  bg-warning    px-5 py-0">

                       <button class="navbar-toggler" data-toggle="collapse" data-target="#navmenu" >
                           <span class="navbar-toggler-icon" ></span>
                       </button>

                    <div class="collapse navbar-collapse" id="navmenu">

                        <ul class="navbar-nav ">

                        <li class="nav-item ">   <a class="nav-link " href="#">   Home               </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     About us           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Contact            </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Register           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Virtual Classroom  </a>    </li>
                        </ul>
                    </div>
                </nav>

Answer 1

Я проверяю ваш код с bootstrap 4 ниже, есть этот фрагмент. Ваш код работает. В вашем понимании я обнаружил проблему с крахом bootstrap navbar. это связано с экраном или шириной браузера. Если вы используете navbar-expand-md class bootstrap, навигационная панель не будет разрушаться до тех пор, пока ширина браузера не станет меньше или равна 767.98px.

Как это будет работать. Свернуть навигационную панель?

1. navbar без navbar-expand-* class navbar рухнет для всех экранов, потому что bootstrap является мобильным первым дизайном.
2. navbar с navbar-expand-xl class navbar рухнет только экран браузера меньше или равен 1199.98px.
3. navbar с navbar-expand-lg class navbar свернет только экран браузера меньше или равен 991.98px.
4. navbar с navbar-expand-md class navbar свернет только экран браузера меньше или равен 767.98px.
5. navbar с navbar-expand-sm class navbar свернет только экран браузера меньше или равен на 575.98px.

Я предлагаю вам проверить свой код в указанном c окне браузера. Используйте Ctrl+Shift+I для Chrome, чтобы открыть элемент inspect, или вы можете использовать щелчок правой кнопкой мыши на элементе inspect. Затем переключите панель инструментов устройства или Ctrl+Shift+M, чтобы проверить заданную ширину c.

Также отметьте Bootstrap css в head tag. jQuery, Popper. js и Bootstrap. js будут добавлены соответственно до конца body tag. Вы должны добавить порт мета-представления в head тег <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light  bg-warning    px-5 py-0">

                       <button class="navbar-toggler" data-toggle="collapse" data-target="#navmenu" >
                           <span class="navbar-toggler-icon" ></span>
                       </button>

                    <div class="collapse navbar-collapse" id="navmenu">

                        <ul class="navbar-nav ">

                        <li class="nav-item ">   <a class="nav-link " href="#">   Home               </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     About us           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Contact            </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Register           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Virtual Classroom  </a>    </li>
                        </ul>
                    </div>
                </nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 2

Ваши коды работают на меня. Можете ли вы вставить эти адреса CDN между тегами тела?

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>