Ошибка навигационной панели Bootstrap 4

Итак, как вы можете видеть в фрагменте кода, фон выпадающего меню подпрыгивает. Однако, когда я удаляю класс .navlinks-center, он работает нормально.

Я новичок в веб-разработке и был бы очень признателен за помощь, потому что я не могу исправить это, не изменив положение навигационных ссылок.

.navbar-custom {
    background-color: rgba(255,255,255,0.95) !important;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.45s ease;
    z-index: 1030; 
}

.navlinks-center {
position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

    <title>Hello, world!</title>
  </head>
  <body style = " background-color: gray;"
  >
  
 
    <nav class = "navbar navbar-custom Schatten navbar-expand-xl navbar-light justify-content-center">
      <a class = "navbar-brand" href = "#"><img src = "Brand1.png" style = "height: 3.6rem;"></a>
      <a class = "navbar-brand" href = "#"><img src = "Brand2.png" style = "height: 3rem;"></a>
      <button class = "navbar-toggler ml-1" type = "button" data-toggle = "collapse" data-target = "#collapsingNavbar">
        <span class = "navbar-toggler-icon"></span>
    </button>
      <div class = "collapse navbar-collapse" id = "collapsingNavbar">
        <ul class = "navbar-nav mr-auto navlinks-center">
          <li class = "nav-item active">
            <a class = "nav-link hvr-grow" href = "#">Home <span class = "sr-only">(current)</span></a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link hvr-grow" href = "about.html">Über uns</a>
          </li>
            <li class = "nav-item">
            <a class = "nav-link hvr-grow" href = "events.html">Events</a>
          </li>
            <li class = "nav-item">
            <a class = "nav-link hvr-grow" href = "forum.html">Forum</a>
          </li>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
  </body>
</html>

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

<!doctype html>
<html lang = "en">
  <head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

    <title>Hello, world!</title>
  </head>
  <body style = " background-color: gray;"
  >
  
 
    <nav class = "navbar navbar-custom Schatten navbar-expand-xl navbar-light justify-content-center">
      <a class = "navbar-brand" href = "#"><img src = "Brand1.png" style = "height: 3.6rem; width: 108px;"></a>
      <a class = "navbar-brand" href = "#"><img src = "Brand2.png" style = "height: 3rem; width: 261px;"></a>
      <button class = "navbar-toggler ml-1" type = "button" data-toggle = "collapse" data-target = "#collapsingNavbar">
        <span class = "navbar-toggler-icon"></span>
    </button>
      <div class = "collapse navbar-collapse" id = "collapsingNavbar">
        <ul class = "navbar-nav mr-auto navlinks-center">
          <li class = "nav-item active">
            <a class = "nav-link hvr-grow" href = "#">Home <span class = "sr-only">(current)</span></a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link hvr-grow" href = "about.html">Über uns</a>
          </li>
            <li class = "nav-item">
            <a class = "nav-link hvr-grow" href = "events.html">Events</a>
          </li>
            <li class = "nav-item">
            <a class = "nav-link hvr-grow" href = "forum.html">Forum</a>
          </li>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
  </body>
</html>

Теперь он отлично работает с маленькими экранами, но на большом экране элементы навигации выравниваются слева рядом с брендами.

navlinks-center — это ваш собственный CSS, зачем вам position: absolute?

— 04.02.2019 17:45

tbh Я не уверен на 100%, почему я поместил его туда, и, вероятно, было бы целесообразно удалить его, но он каким-то образом перемещает содержимое ниже, если я это делаю. Я удалю это позже

— 04.02.2019 17:55

html css

04.02.2019 17:42

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

112

Ответы 1

Нужна ли "позиция: абсолютная"?

Потому что я думаю, что вы можете достичь своей цели, просто используя свойства text-align или margin.

Например :

       .navbar-custom {
            background-color: rgba(255,255,255,0.95) !important;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 0.45s ease;
            z-index: 1030; 
        }

        .navbar-collapse{
            text-align: center;
        }

Или

       .navbar-custom {
            background-color: rgba(255,255,255,0.95) !important;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 0.45s ease;
            z-index: 1030; 
        }

        .nav-item {
            margin: auto;
        }

[РЕДАКТИРОВАТЬ]

Чтобы сохранить меню по центру и изображения слева (как в вашем примере), вам может потребоваться использовать медиа-запросы. Если изображения вашего бренда имеют постоянную ширину, вот CSS, который должен работать:

    .navbar-custom {
            background-color: rgba(255,255,255,0.95) !important;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 0.45s ease;
            z-index: 1030;
        }

        .nav-item{
            margin: auto;
        }
        .navbar-nav{
            display: flex;
            margin: auto;
        }

        @media screen and (min-width:1200px){
            .navbar-nav{
                padding-right: 6.6rem;
            }
        }

Но я все еще не уверен, что это лучшее решение.

Хорошая идея, проблема в том, что я использую 2 изображения на панели навигации, и они сдвигают текст вправо, когда я просто использую text-align: center.

— 04.02.2019 18:15

Вы хотите, чтобы изображения брендов были слева, а меню всегда было в центре?

— 04.02.2019 19:13

На дисплее 1920x1080 пикселей да. Немного меньше вы получите бренды рядом друг с другом с раскрывающимся списком рядом с ним. На телефонах бренды расположены друг над другом, а раскрывающийся список внизу.

— 04.02.2019 20:53

Я попробую эти решения. Проблема заключается в том, что выравнивание текста и автоматическое отступы работают на маленьких экранах, но на рабочем столе текст выравнивается по левому краю.

— 04.02.2019 21:31

04.02.2019 18:02