Блог

Главная - Вопросы по программированию - Есть идеи, почему мой выпадающий список не работает в Bootstrap5?

Есть идеи, почему мой выпадающий список не работает в Bootstrap5?

#javascript #html #css

Вопрос:

Итак, я следую учебнику по Udemy, и нас попросили создать навигационную панель, однако учебник находится в Bootstrap4, и я, очевидно, хочу изучать Bootstrap5, поэтому я не уверен, как еще изменить код, чтобы он работал, кроме ml-auto на ms-auto и data-target на data-bs-target и т. Д…

 <html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2 xf0Uwh9KtT" crossorigin="anonymous"></script>

</head>

<body>

  <section id="title">

    <!-- Nav Bar -->
    <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">Tindog</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data--bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Download</a>
            </li>
        </ul>
     </div>
    </nav>

</body>
</html>

Ответ №1:

исправлено.. Я глуп 😀 У меня были данные-bs-цель, а не данные-bs-цель

Ответ №2:

данные—bs-цель

вы добавили двойную черточку и добавили закрывающий тег для раздела.

Ответ №3:

В теге есть атрибут «данные—bs-цель». После «данных» должно быть «данные-bs-цель»с одним дефисом.

P.S. Добавьте <meta name="viewport" content="width=device-width, initial-scale=1.0"> в свою голову тег, чтобы получить лучшие результаты в мобильной версии.

Метки: ,