Codepen Bootstrap格式错误

Question

我使用Atom为FreeCodeCamp编写了一个小型网站，一切都很顺利。但是，当我试图复制&将代码粘贴到CodePen中时，它出现了错误的格式。见here。

请在下面找到导航栏的HTML和CSS：

<!-- NAVIGATION --> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">10"88</a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 

-

/* -- NAVBAR -- */ 
.navbar { 
    margin-bottom: 0; 
} 

.navbar-default { 
    background-color: white; 
    border-color: white; 
    border-radius: 0; 
} 

.navbar-default .navbar-brand, 
.navbar-default .navbar-nav > li > a { 
    color: black; 
} 

.navbar-default .navbar-brand:hover { 
    color: white; 
    background-color: #AE1429; 
} 

.navbar-default .navbar-nav .active > a { 
    color: white; 
    background-color: #AE1429; 
} 

.navbar-default .navbar-nav > li > a:hover { 
    color: white; 
    background-color: #AE1429; 
} 

我不明白为什么我的导航栏（和图像）看起来好像正在观看的一个小视口。有什么建议么？

Answer 1

您正在尝试使用bootstrap 3类与bootstrap 4 alpha。 看看documentation：没有navbar-fixed-top或navbar-default。

只需更换设置中的链接https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ，一切都会好起来的。