Boostrap切换导航栏不扩展

Question

我已经使用无效的导航栏菜单查看了有关此问题的几个已回答的问题。他们对我目前的编码没有帮助。菜单栏没有扩展，也没有在页面顶部内嵌（在一行中）。

菜单目前看起来像这样：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

Answer 2

如果你在bootstrap 4.0 alpha6使用{1那么这里是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 我希望这可以帮助你