Question

I have a nav-bar with navbar-brand on the right, menu elements in the middle and social links on the right. I've added navbar-collapse and collapse classes to the div containing those items.

However, After I resize screen below 768px every item except navbar-header disappears.

What am I missing?

HTML file:

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

$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;
}

Demo: https://jsfiddle.net/moph4wto/

Answer 1

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

Answer 2

navbar-header在任何屏幕尺寸上都不会消失，因为当调整786px以下的屏幕大小时，如果在任何情况下你想要隐藏它，你必须在正确的媒体上显示你的切换导航按钮的空间查询自己

Bootstrap 3 menu items disappear on small screen

2 个答案: