Блог

Главная - Вопросы по программированию - Я использую bootstrap для создания панели навигации, но она не работает, однако другие классы bootstrap работают нормально

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

#php #html #css

#php #HTML #css

Вопрос:

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

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
         content="">
    <meta name="keywords"
          content="">
         
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylesheet.css?v=<?php echo time(); ?>">
</head>
<body id="body">
    <nav class="navbar navbar-default">
        <div class="container-fluid"> 
            <ul class="nav navbar-nav">
               <li class="active"><a href="">Home</a></li>
            </ul>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Комментарии:

1. Пожалуйста, проверьте документацию еще раз. Посмотрите на этот пример getbootstrap.com/docs/4.4/examples/carousel и выполните «просмотр исходного кода» в вашем браузере. Он показывает рабочую панель навигации. Также рассмотрите возможность обновления до последней версии, если вы еще не слишком углубились в свои страницы.

2. @shreyanshsaxena просто интересно, привел ли вас предоставленный мной ответ на правильный путь? Если да, можете ли вы пометить это как правильное? 🙂

3. @finiteloop Мне очень жаль, это просто полностью вылетело у меня из головы, когда я был занят этим проектом. Но ваш ответ действительно помог мне .. Большое вам спасибо, и я сожалею.

4. @shreyansh saxena приятно это слышать. Вы пометите ответ как правильный, когда у вас будет шанс? 🙂

5. @finiteloop на самом деле я новичок в stackoverflow, я не знаю, как это сделать, я пытался выполнить поиск в Google, но это не помогло. Так что, если бы вы могли сказать мне, как это сделать? Я более чем счастлив сделать это 🙂

Ответ №1:

Дважды проверьте классы. Я смог заставить ее работать, следуя документации здесь:https://getbootstrap.com/docs/4.0/components/navbar /

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

 




     <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description"
             content="">
        <meta name="keywords"
              content="">
             
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="stylesheet.css?v=<?php echo time(); ?>">
    </head>
    <body id="body">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
     
    </ul>
  </div>
</nav>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
    </html>

Ответ №2:

Вы используете неправильный код для Bootstrap 4.x. Ваш код работает на bootstrap 3.x

Если вы хотите использовать панель навигации последней версии bootstrap, используйте это.

 <nav class="navbar navbar-light bg-light">
  <div class="container-fluid"> 
   <ul class="navbar-nav">
     <li class="nav-item active">
       <a href="" class="nav-link">Home</a>
     </li>
  </ul>
</div>

Для получения дополнительной информации проверьте панель навигации начальной загрузки