导航栏的 Bootstrap Toggle 未扩展

Question

我已经查看了几个关于导航栏菜单不起作用的问题的已回答问题。他们对我目前的编码没有帮助。菜单栏没有展开，也没有在页面顶部内联（在一行中）。

菜单当前如下所示：

<nav class="navbar navbar-inverse navbar-fixed-top navtop" role=navigation>
  <div class="container">
        <div class="navbar-header">
     
   <!-- This button allows for mobile navigation, it collapses the navbar on smaller screens, the span class creates the three lines indicating a dropdown menu -->       
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
      <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">CodeMcCoy</a>      
     </div> <!--navbar-header -->
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
  <li class="active"><a href="#Home"><span class="glyphicon glyphicon-home"></span>Home</a></li>
    <li><a href="#About"><span class="glyphicon glyphicon-user"></span>About</a></li>
  <li><a href="#Portfolio"><span class="glyphicon glyphicon-pushpin"></span>Portfolio</a></li>
  <li><a href="#Contact"><span class="glyphicon glyphicon-envelope"></span>Contact</a></li>
</ul>
    </div> <!--NavHeaderCollapse-->
          </div> <!--container-->
    </nav> <!--navbar -->

Answer 1

我最初倾向于认为您的项目缺少依赖项，即 css 和 bootstrap 的 js 文件（可能还有 jquery）。我已将您提供的代码放入一个您可以查看的 codeply 项目中 here。一切似乎都在正常运行。

Answer 2

嘿，如果您使用的是 bootstrap 4.0 alpha6，这里是其 navbar

的代码

到这里https://v4-alpha.getbootstrap.com/components/navbar/

嘿，如果您使用的是 bootstrap 4.0 测试版，则使用的类有一些变化：

.badge-default to .badge-dark

.bg-faded to .bg-light

.bg-inverse to .bg-dark

.card-block to .card-body

.card-outline-primary to .border-primary

.card-outline-secondary to .border-secondary

.card-outline-success to .border-success

.card-outline-info to .border-info

.card-outline-warning to .border-warning

.card-primary to .bg-primary

.card-success to .bg-success

.card-info to .bg-info

.card-warning to .bg-warning

.card-danger to .bg-danger

.hidden-xs-down to .d-none .d-sm-block

.hidden-sm-down to .d-none .d-md-block

.hidden-md-down to .d-none .d-lg-block

.hidden-lg-down to .d-none .d-xl-block

.hidden-xs-up to .d-none

.hidden-sm-up to .d-sm-none

.hidden-md-up to .d-md-none

.hidden-lg-up to .d-lg-none

.hidden-xl-up to .d-xl-none

.navbar-toggleable-sm to .navbar-expand-sm

.navbar-toggleable-md to .navbar-expand-md

.navbar-toggleable-lg to .navbar-expand-lg

.navbar-toggleable-xl to .navbar-expand-xl

这是从 https://medium.com/@lukaszholeczek/how-to-upgrade-bootstrap-4-alpha-6-to-bootstrap-4-beta-d43b4210f2a3 借来的希望对您有所帮助

导航栏的 Bootstrap Toggle 未扩展

Boostrap Toggle for Navbar not expanding

html

webpage

collapse

navbar

twitter-bootstrap