CSS Bootstrap 4.5.1 Компонент навигации не работает

Примечание. Проблема остается той же, когда в разметке присутствует только navbar-header.

У меня есть такая разметка:

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 practice</title>
  <link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
</head>
<body>
  <nav class = "navbar navbar-default">
    <div class = "container-fluid">
      <div class = "navbar-header">
        <button class = "navbar-toggle" type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1">
          <span class = "sr-only">Navbar Toggle</span>
          <span class = "icon-bar"></span>
          <span class = "icon-bar"></span>
          <span class = "icon-bar"></span>
        </button>
        <a href = "#" class = "navbar-brand"><img src = "brand.jpg" alt = "BRAND" width = "100px"></a>
      </div>
      <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
        <ul class = "nav navbar-nav">
          <li class = "active"><a href = "#"><span class = "sr-only">current</span></a></li>
          <li><a href = "#">Link</a></li>
          <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown <span class = "caret"></span></a>
            <ul class = "dropdown-menu">
              <li><a href = "#">link</a></li>
              <li><a href = "#">link</a></li>
              <li><a href = "#">link</a></li>
              <li role = "separator" class = "divider"></li>
              <li><a href = "#">link</a></li>
            </ul>
          </li>
        </ul>
        <form class = "navbar-form navbar-left" role = "search">
          <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
          </div>
          <button type = "submit" class = "btn btn-default">Submit</button>
        </form>
        <ul class = "nav navbar-nav navbar-right">
          <li><a href = "#">Link</a></li>
          <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown <span class = "caret"></span></a>
            <ul class = "dropdown-menu">
              <li><a href = "#">Link</a></li>
              <li class = "divider" role = "separator"></li>
              <li><a href = "#">Link</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Видна только brand.jpg и пустая кнопка рядом с ней.

Даже если нет наценки, кроме navbar-header, результаты все равно те же. Что мне не хватает? Может проблема с версией бутстрапа?

Я использую Opera Stable 73.0.3.

Показывают ли средства разработки (вкладка сети) загрузку CSS?

— 20.12.2020 12:56

@Gerard Да!, вся разметка и css включены. Вот почему я подумал, что, возможно, какое-либо обновление версии изменило название или около того, потому что недавно я увидел, что col-[ss]-offset-n больше не работает, вместо этого offset-n работает.

— 20.12.2020 13:01

Я не могу понять, почему в nav два списка. Чего вы пытаетесь достичь? Обратитесь к этому руководству по созданию простой панели навигации с использованием начальной загрузки.

— 20.12.2020 13:09

@ankitbeniwal для меня как такового нечего добиваться. Я слежу за загрузочной книгой, и разметка более или менее соответствует ей. Как я уже сказал, даже если нет наценки, кроме navbar-header div, результат тот же. Насколько я знаю, там должен быть гамбургер.

— 20.12.2020 13:23

Когда я запускаю ваш код с помощью <link href = "stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/…" rel = "stylesheet"/>, он уже выглядит намного лучше.

— 20.12.2020 14:04

@ Джерард, проблема в версии. Пробовал разные версии бутстрапа. Моя разметка отлично работает на bootstrap v3, но не работает на v4. Если кто-то использовал bootstrap v4, они были бы очень полезны, так как я на 100% уверен, что немного изменились только имена классов.

— 20.12.2020 14:54

html css twitter-bootstrap

20.12.2020 12:52

Toor - Ангулярный шаблон для бронирования путешествий

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

344

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что вы используете коды Bootstrap-3 в версии bootstrap-4. Если вы хотите использовать Bootstrap-3, вам необходимо скачать Bootstrap-3. Если вы используете CDN Bootstrap-3, вы должны включить jquery-3.5.1 и bootstrap-3.4.1/js внизу вашего HTML-кода (перед закрывающим тегом body). Проверьте мой код ниже. Здесь я использовал CDN.

Начальная загрузка - 3:

<!DOCTYPE html>
<html lang = "en">
    <head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 practice</title>
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity = "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin = "anonymous">

    </head>
    <body>
        <nav class = "navbar navbar-default">
            <div class = "container-fluid">
            <div class = "navbar-header">
                <button class = "navbar-toggle" type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1">
                <span class = "sr-only">Navbar Toggle</span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                </button>
                <a href = "#" class = "navbar-brand"><img src = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt = "BRAND" width = "50px"></a>
            </div>
            <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
                <ul class = "nav navbar-nav">
                <li class = "active"><a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a></li>
                <li><a href = "#">Link</a></li>
                <li class = "dropdown">
                    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown <span class = "caret"></span></a>
                    <ul class = "dropdown-menu">
                    <li><a href = "#">link</a></li>
                    <li><a href = "#">link</a></li>
                    <li><a href = "#">link</a></li>
                    <li role = "separator" class = "divider"></li>
                    <li><a href = "#">link</a></li>
                    </ul>
                </li>
                </ul>
                <form class = "navbar-form navbar-left" role = "search">
                <div class = "form-group">
                    <input type = "text" class = "form-control" placeholder = "Search">
                </div>
                <button type = "submit" class = "btn btn-default">Submit</button>
                </form>
                <ul class = "nav navbar-nav navbar-right">
                <li><a href = "#">Link</a></li>
                <li class = "dropdown">
                    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false">Dropdown <span class = "caret"></span></a>
                    <ul class = "dropdown-menu">
                    <li><a href = "#">Link</a></li>
                    <li class = "divider" role = "separator"></li>
                    <li><a href = "#">Link</a></li>
                    </ul>
                </li>
                </ul>
            </div>
            </div>
        </nav>
        
        <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
        
        <!-- Latest compiled and minified JavaScript -->
        <script src = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity = "sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin = "anonymous"></script>

    </body>
</html>

Или, если вы хотите использовать Bootstrap-4, используйте коды Bootstrap-4.

Начальная загрузка - 4:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous">
</head>
<body>
    <nav class = "navbar navbar-expand-lg navbar-light bg-light">
        <a class = "navbar-brand" href = "#"><img src = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt = "BRAND" width = "50px"></a>
        <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-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 mr-auto">
            <li class = "nav-item active">
              <a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link" href = "#">Link</a>
            </li>
            <li class = "nav-item dropdown">
              <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                Dropdown
              </a>
              <div class = "dropdown-menu" aria-labelledby = "navbarDropdown">
                <a class = "dropdown-item" href = "#">link</a>
                <a class = "dropdown-item" href = "#">link</a>
                <a class = "dropdown-item" href = "#">link</a>
                <div class = "dropdown-divider"></div>
                <a class = "dropdown-item" href = "#">link</a>
              </div>
            </li>
            <form class = "form-inline my-2 my-lg-0">
                <input class = "form-control mr-sm-2" type = "search" placeholder = "Search" aria-label = "Search">
                <button class = "btn btn-outline-success my-2 my-sm-0" type = "submit">Search</button>
              </form>
          </ul>

          <ul class = "navbar-nav ml-auto">
            
            <li class = "nav-item">
              <a class = "nav-link" href = "#">Link</a>
            </li>
            <li class = "nav-item dropdown">
              <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                Dropdown
              </a>
              <div class = "dropdown-menu" aria-labelledby = "navbarDropdown">
                <a class = "dropdown-item" href = "#">link</a>
                <div class = "dropdown-divider"></div>
                <a class = "dropdown-item" href = "#">link</a>
              </div>
            </li>
          </ul>
          
        </div>
      </nav>

<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous"></script>
</body>
</html>

Dropdowns не работает в режиме рабочего стола, но работает на 100% в мобильном представлении. Я не мог найти, почему так.

— 21.12.2020 05:28

Здесь я вижу, что оба раскрывающихся списка работают. Проверьте фрагмент, который я приложил. Возможно, вы делаете что-то не так.

— 21.12.2020 06:04

Да, я понял это. Было несколько конфликтующих стилей, вызывающих проблему.

— 21.12.2020 10:41

21.12.2020 01:16