nav navbar-nav не доступен? - PullRequest
2 голосов
/ 02 июня 2019

<html>

<head>
  <title>Bootstrap Navbars</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
    	        <span class="sr-only">Toggle navigation</span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	      </button>
        <a href="#" class="navbar-brand">Koffee</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-nav-demo">
        <ul class="nav navbar-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

код nav navbar-nav больше не работает в загрузочной версии 4>?этот код работает только с начальной загрузкой 3?Я взял код для navbar-nav из старой программы. Заказ не получаю, я делаю неправильно, любая помощь будет очень полезна

Ответы [ 3 ]

1 голос
/ 02 июня 2019

Пожалуйста, прочитайте документацию по миграции , чтобы выяснить разницу между bootstrap v3 и v4. Есть пара важных изменений для navbar!

Следующее будет работать для bootstrap4 :

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container">
        <a href="#" class="navbar-brand">Koffee</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-nav-demo">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="bs-nav-demo">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

демо: https://jsfiddle.net/davidliang2008/6a3p7t2r/12/

Внесены изменения для navbar, toggler, nav, navbar-nav и т. Д. Я настоятельно рекомендую вам ознакомиться с документацией Bootstrap!

0 голосов
/ 02 июня 2019

Попробуйте один из них:

<nav class="navbar navbar-light">  <!-- Bootstrap 4 -->
<nav class="navbar navbar-dark">  <!-- Bootstrap 4 -->

вместо:

<nav class="navbar navbar-default">  <!-- Bootstrap 3 -->

Теперь вы можете заметить разницу между BS3 и BS4.это не слишком много

0 голосов
/ 02 июня 2019

Конечно, Bootstrap 4/4.1x поддерживает navbar-nav

Используйте navbar-light/navbar-dark вместо navbar-default. перейти по этой ссылке

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