Bootstrap панель навигации не сворачивается и не реагирует - PullRequest
Новая
       3

Bootstrap панель навигации не сворачивается и не реагирует

0 голосов
/ 19 июня 2020

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

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

Я полностью потерялся. «Может кто-нибудь, пожалуйста, мне поможет ... спасибо 

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 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>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <header>
    <div id="navbar" class="container-fluid">
      <div class="container-fluid nav-fill">
        <nav class="navbar navbar-expand-md navbar-light d-flex justify-content-center" role="navigation">
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent"
            aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse d-flex align-items-center justify-content-lg-between " id="navbarContent">

            <ul class="navbar-nav nav-fill w-100 d-flex align-items-center"> 
              <li class="nav-item">
                <ul class="navbar-nav nav-fill d-flex align-items-center">
                  <li class="nav-item">
                    <a class="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png"
                      alt="sr-logo.png"></a>
                  </li>
                  <li class="nav-item">
                    <a class="brand-logo-user navbar-brand" href="#"><img class="lvmh-logo" src="./img/lvmh-logo.jpg"
                      alt="lvmh-logo.jpg"></a>
                  </li>
                </ul>
              </li>
              <li class="nav-item w-50">
                <ul class="navlinks navbar-nav nav-fill w-100">
                  <li class="nav-item">
                    <a class="nav-link active" href="#">LINK1<span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">LINK2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">LINK3</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">LINK4</a>
                  </li>
                </ul>
              </li>

              <li class="nav-item align-items-center ml-5">
                <ul class="navbar-nav nav-fill align-items-center">
                  <li>
                  <li class="nav-item">
                    <img src="img/profil.svg" class="profile d-inline">
                  </li>
                  <li>
                  <li class="nav-item">
                    <p class="username d-inline ml-3">Mr. Blah</p>
                  </li>
                </ul>
              </li>

              <li class="nav-item">
                <ul class="navbar-nav nav-fill d-flex justify-content-between w-75">
                  <li class="nav-item active">
                    <a class="language active d-inline">FR</a>
                  </li>
                  <li class="nav-item">
                    <a class=" language d-inline">EN<a>
                  </li>
                </ul>
              </li> 
          </div>
      </div>
      </nav>
    </div>
    </div>
  </header>

  <script src="scripts.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
</body>

</html>```




My CSS :

    ```body{
      font-family: 'Poppins', sans-serif;
    }

    nav{
      background-color: white;
      height: 97px;
      padding: 0;
      margin: 0;
    }

    .brands {
      display: inline;  
      align-items: center;
    }
    .navbar-light .navbar-nav .nav-link {
      color: black;
    }

    .navlinks{
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: 0.5px;
      text-align: center;
      color: black
    }
    .navlinks li > a:after{
      content: '';
      display: block;
      height: 5px;
      background-color:#00e7b5;
      border-radius: 7%;
      transform: scaleX(0);
      transition: transform .3s;
    }
    .navlinks li > a:hover:after{
      transform: scaleX(1);
      transition: transform .3s;
    }
    .navlinks .active{
      color:#00e7b5 !important;
    }


    img{
      max-width: 150px;
      max-height: 20px;
    }


    .username{
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #5300b4;
    }

    .language{
      font-family: Poppins;
      font-size: 18px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: 2px;
      color: black;
    }


    .navlinks a:hover{
      color: #00e7b5 !important;
      }
    nav ul{
        text-align: center;
      }```

Ответы [ 2 ]

0 голосов
/ 22 июня 2020

Это для переключения на панели навигации 

body{
  font-family: 'Poppins', sans-serif;
}

nav{
  background-color: white;
  margin: 0;
}
.navbar-nav > li{
margin-left:100px;
margin-right:100px;
}

.brands {
  display: inline;  
  align-items: center;
}
.navbar-light .navbar-nav .nav-link {
  color: black;
}

.navlinks{
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.5px;
  text-align: center;
  color: black
}
.navlinks li > a:after{
  content: '';
  display: block;
  height: 5px;
  background-color:#00e7b5;
  border-radius: 7%;
  transform: scaleX(0);
  transition: transform .3s;
}
.navlinks li > a:hover:after{
  transform: scaleX(1);
  transition: transform .3s;
}
.navlinks .active{
  color:#00e7b5 !important;
}

img{
  max-width: 150px;
  max-height: 20px;
}

.username{
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #5300b4;
}

.language{
  font-family: Poppins;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 2px;
  color: black;
}

.navlinks a:hover{
  color: #00e7b5 !important;
}
nav ul{
    text-align: center;
}

    <body>
<br>
    <div class="container-fluid">
        
        <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png">Brand </a>
  
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navlinks">

          <li><a class="nav-link"  href="#">LINK1</a></li>
          <li><a href="#">LINK2</a></li>
          <li><a href="#">LINK3</a></li>
          <li><a href="#">LINK4</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right navlinks">
          <a class="brand-logo navbar-brand username" href="#"><img class="sr-logo" src="./img/1.jpg">Mr X</a>
        
        </ul>
      </div>
  </nav>
    </div>
    </div> 
</body>

заголовочные файлы: Я использовал bootstrap 3.3.7 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
0 голосов
/ 19 июня 2020

Сначала удалите все экземпляры BS v3 и просто добавьте CDN для BS v4, не забудьте добавить ссылки CSS в заголовок и ссылки JS перед закрытием тега тела. Вы можете получить последние CDN из здесь , убедитесь, что вы включили jquery и popper. js перед добавлением bootstrap js, поскольку BS4 зависит от этих двух скриптов, вы можете найти эти скрипты CDN по той же ссылке, затем

Вы должны правильно выровнять ваш контент, поскольку в настоящее время это не так, подробнее о bootstrap navbar здесь и теперь переходим к указателям в вашем запросе

Панель навигации не сворачивает мои элементы. После использования правильных CDN в нужном месте она начнет сворачиваться.

Элементы не выровнены по центру в панели навигации Из приведенной выше ссылки см., Как сделать содержимое панели навигации центрированным.

Я установил контейнер-жидкость, и мои элементы не растекаются по мере необходимости. Это будет работать, также убедитесь, что не используете container-fluid внутри container-fluid, так как это добавит ненужные отступы с обеих сторон.

Я бы хотел, чтобы при нажатии на меню бургера отображались только мои навигационные ссылки. Чтобы получить этот результат, переместите ваши <a class="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png" alt="sr-logo.png"></a> выходов Используйте div с классом collapse.

Тщательно проверьте код, поскольку он содержит много тегов, которые не открываются или закрываются в правильных местах, попробуйте запустить навигационную панель, и она будет работать.

Удачи, надеюсь, поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...