Boostrap 4.1. Панель навигации

Недавно я следил за одним учебником по Bootstrap на YouTube. Я следил за кодом и написал его точно так же, но у меня небольшая проблема с панелью навигации.

У автора явно был тот же код, насколько я помню. Когда браузер открыт на широком экране, моя панель навигации не работает полностью отзывчивой.

Значок меню остается показанным, а элементы навигации не отображаются в строке без значка меню в полноэкранном режиме.

<!doctype HTML>
<html>
<head>
    <meta charset = "utf-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity = "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin = "anonymous">
    <link href = "C:\Users\Filip\Desktop\herbarica\main.css" rel = "stylesheet">
    <title>Herbarica</title>
</head>
<body>
    <nav class = "navbar navbar-expand-mb navbar-light bg-light sticky-top">
        <div class = "container-fluid">
            <a class = "navbar-brand" href = "index.html"> <img src = "#"></a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarResponsive">
                <span class = "navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse " id = "navbarResponsive">
                <ul class = "navbar-nav ml-auto">
                    <li class = "nav-item active">
                        <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 = "#">Shop</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link" href = "#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity = "sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity = "sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin = "anonymous"></script>
</body>
</html>

вы добавили js ссылки?

— 19.04.2018 14:09

да. Пожалуйста, не обращайте на меня внимания. Я впервые на этой странице и пытаюсь понять, как поставить полный код -.-.

— 19.04.2018 14:10

html css bootstrap-4

19.04.2018 14:04

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

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

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 369

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

Ответы 3

<!DOCTYPE html>
<html lang = "en">
<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class = "navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class = "navbar-brand" href = "#">
    <img src = "bird.jpg" alt = "logo" style = "width:40px;">
  </a>

  <!-- Links -->
  <ul class = "navbar-nav">
    <li class = "nav-item">
      <a class = "nav-link" href = "#">Link 1</a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "#">Link 2</a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "#">Link 3</a>
    </li>
  </ul>
</nav>

<div class = "container-fluid">
  <h3>Brand / Logo</h3>
  <p>When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar.</p>
</div>

</body>
</html>

Перейдите по этой ссылке https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Подскажите, пожалуйста, как набирать код в этом текстовом редакторе.

— 19.04.2018 14:13

19.04.2018 14:10

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

Ошибка печати

Это потому, что вы указали неправильный класс

Change navbar-expand-mb to navbar-expand-md

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>



<nav class = "navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class = "container-fluid">

    <a class = "navbar-brand" href = "index.html"> <img src = "#"></a>

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

    <div class = "collapse navbar-collapse" id = "navbarResponsive">
      <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 = "#">Action</a>
            <a class = "dropdown-item" href = "#">Another action</a>
            <div class = "dropdown-divider"></div>
            <a class = "dropdown-item" href = "#">Something else here</a>
          </div>
        </li>
        <li class = "nav-item">
          <a class = "nav-link disabled" href = "#">Disabled</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

это оно! Большое спасибо. В следующий раз я должен лучше сосредоточиться.

— 19.04.2018 14:43

Это происходит все время. Так что не волнуйтесь :)

— 19.04.2018 14:50

19.04.2018 14:25

Как резюме

    <nav class = "navbar navbar-expand-xl> //navbar vertically on extra large screen
    <nav class = "navbar navbar-expand-lg> //navbar vertically on large screen
    <nav class = "navbar navbar-expand-md> //navbar vertically on medium screen
    <nav class = "navbar navbar-expand-sm> //navbar vertically on small screen

19.04.2018 15:25