Bootstrap 3菜單項在小屏幕上消失

-1

我有一個導航欄，右側是導航欄品牌，中間是菜單元素，右側是社交鏈接。我已將navbar-collapse和collapse類添加到包含這些項目的div。Bootstrap 3菜單項在小屏幕上消失

但是，當我調整屏幕大小在768px以下時，除navbar-header之外的每個項目都消失。

我錯過了什麼？

HTML文件：

<div class="container-fluid page"> 
    <div class="nav navbar navbar-default" role="navigation" style="z-index: 3"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" routerLink="/home"> 
     NAME SURNAME 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <!-- Social links --> 
     <ul id="middleMenu" class="nav navbar-nav navbar-center"> 
     <li> 
      <a id="home" class="menu-link" routerLink="/home" routerLinkActive="active"> 
      <i class="fa fa-home fa-2x menu-image"></i> 
      <i class="menu-text">HOME</i> 
      </a> 
     </li> 
     <li> 
      <a id="about" class="menu-link" routerLink="/about" routerLinkActive="active"> 
      <i class="fa fa-user-secret fa-2x menu-image"></i> 
      <i class="menu-text">ABOUT</i> 
      </a> 
     </li> 
     <li> 
      <a id="skills" class="menu-link" routerLink="/skills" routerLinkActive="active"> 
      <i class="fa fa-code fa-2x menu-image"></i> 
      <i class="menu-text">SKILLS</i> 
      </a> 
     </li> 
     <li> 
      <a id="work" class="menu-link" routerLink="/work" routerLinkActive="active"> 
      <i class="fa fa-cog fa-2x menu-image"></i> 
      <i class="menu-text">MY WORK</i> 
      </a> 
     </li> 
     <li> 
      <a id="contact" class="menu-link" routerLink="/contact" routerLinkActive="active"> 
      <i class="fa fa-envelope fa-2x menu-image"></i> 
      <i class="menu-text">CONTACT</i> 
      </a> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a class="fa fa-github fa-lg social-link" target="_blank" href="$"> 
      </a> 
     </li> 
     <li> 
      <a class="fa fa-twitter fa-lg social-link" target="_blank" href="$"> 
      </a> 
     </li> 
     <li> 
      <a class="fa fa-linkedin fa-lg social-link" target="_blank" href="$"> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </div> 
    <div id="particles-js"></div> 
<!-- <router-outlet></router-outlet> 
    --></div> 
</body>

SCSS文件：

$element-color: #08fdd8; 
$fade_time: 0.5s; 


.fa:hover { 
    color: $element-color !important; 
} 


#middleMenu li { 
    width: 70px; 
    .menu-text { 
    white-space: nowrap; 
    text-align: center; 
    display: none; 
    color: $element-color !important; 
    } 
    .menu-image { 
    //display: block; 
    margin-left: 8px; 
    margin-top: -5px; 
    visibility: visible; 
    opacity: 1; 
    animation: fadein $fade_time; 
    } 
    &:hover { 
    color: $element-color !important; 
    .menu-image { 
     display: none; 
     visibility: hidden; 
     opacity: 0; 
     animation: fadeout $fade_time; 
    } 
    .menu-text { 
     display: block; 
     visibility: visible; 
     opacity: 1; 
     animation: fadein $fade_time; 
    } 
    } 
} 


//@media (min-width: $break-size) { 
    .navbar-center { 
    position: absolute; 
    left: 50%; 
    transform: translatex(-50%); 
    display: inline-block; 
    white-space: nowrap 
    } 
//} 

.navbar-brand { 
    color: #ffffff !important; 
} 

.navbar-brand:hover { 
    color: $element-color !important; 
} 

#particles-js { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: -1; 
} 


.fa, .navbar-brand { 
    transition: color 0.2s ease; 
}

演示：https://jsfiddle.net/moph4wto/

來源

2017-04-24 Quba

「我缺少什麼？」 - 代碼在你的問題，爲初學者。 jsFiddles很棒，但你的問題必須由它自己負責。我會從你的小提琴中取出代碼。 –