Boostrap切换为Navbar不扩展

我已经回顾了几个有关此问题的回答问题，并且无法使用导航栏菜单。而且他们对我目前的编码没有帮助。菜单栏不扩展，并且不在页面顶部内联（在一行中）。Boostrap切换为Navbar不扩展

菜单目前看起来是这样的：

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

来源

2017-08-30 CodeMcCoy

你怎么包括你的项目的JavaScript文件？ – cwanjt

我开始倾向于认为，有依赖关系缺少项目，即CSS和JS文件引导（也可能是jquery）。我已将您提供的代码放入代码项目中，您可以查看here。一切似乎都正常运作。

来源

2017-08-30 22:32:25 cwanjt

非常感谢你，我终于明白了，是的，我错过了js文件。然而，对于我的生活，我无法弄清楚为什么导航栏不会保持水平。它仍然有导航栏，当没有折叠，看起来垂直，而不是在同一行...也许我应该添加一个div行？ – CodeMcCoy

导航栏不保持水平...即使在代码项目中......或者您是否希望切换的导航水平显示？ – cwanjt

即使屏幕很大，它在常规模式下也不是水平的。它与大屏幕垂直，顶部有BIG导航栏以补偿垂直。当我只希望它是水平的，然后用较小的屏幕折叠。 – CodeMcCoy

嘿，如果你正在使用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借来的我希望这可以帮到你

来源

2017-08-31 05:49:48

Boostrap切换为Navbar不扩展

回答

相关问题