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 ，一切都會好起來的。