Question

<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>

引导版本4中的代码nav navbar-nav是否不再起作用？此代码仅适用于Bootstrap 3吗？我从旧程序中获取了navbar-nav的代码。我没有得到wt。我做错了。任何帮助都将非常有帮助

Answer 1

请阅读migration documentation来了解 bootstrap v3和v4之间的区别。 navbar有couple important changes！

以下内容适用于 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/

导航栏，切换器，导航，导航栏导航等都有更改。强烈建议您查看Bootstrap的文档！

Answer 2

当然，Bootstrap 4/4.1x支持navbar-nav

使用navbar-light/navbar-dark代替navbar-default。遵循此link

Answer 3

尝试以下方法之一：

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

代替：

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

现在您可能会注意到BS3和BS4之间的区别。不是太多

nav navbar-nav不可用？

3 个答案: