html - Bootstrap 3 菜单项在小屏幕上消失

Question

我有一个导航栏，右侧是 navbar-brand，中间是菜单元素，右侧是社交链接。我已将 navbar-collapse 和 collapse 类添加到包含这些元素的 div。

但是，在我将屏幕大小调整到 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/

Answer 1

问题实际上是由引导媒体查询引起的。有关详细信息，请参阅此帖子 Twitter bootstrap 3 how to activate navbar-collapse on small devices