使用Bootstrap进行样式化和折叠

Question

我疯狂的造型预定义的引导类。首先，我遇到了访问图标栏类的问题，它没有被设置样式。其次，当缩小浏览器时，导航栏会在某个时刻折叠，但在此之前，它会重新排列成两行（BRAND继​​续在其位置，但菜单会进入第二行）。当菜单和品牌无法在同一行共存时，我希望它能够折叠。

我该如何解决这个问题？

HTML

<header id="header-bar" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
        <span class="icon-bar"></span> <!-- Not Styled -->
        <span class="icon-bar"></span> <!-- Not Styled -->
        <span class="icon-bar"></span> <!-- Not Styled -->
      </button>
      <a class="navbar-brand" href="#">BRAND</a> <!-- STYLED -->
    </div>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="nav navbar-nav">
        <li><a class="options" href="#">AAAAAAAAA</a></li>
        <li><a class="options" href="#">BBBBBBBBB</a></li>
        <li><a class="options" href="#">CCCCCCCCC</a></li>
        <li><a class="options" href="#">DDDDDDDDD</a></li>
        <li><a class="options" href="#">EEEEEEEEE</a></li>
        <li><a class="options" href="#">FFFFFFFFF</a></li>
        <li><a class="options" href="#">GGGGGGGGG</a></li>
        <li><a class="options" href="#">HHHHHHHHH</a></li>
      </ul>
    </div>
  </div> <!-- Container -->
</header>

CSS

$blue-logo: #4775FF;

header .container-fluid {
  background-color: $blue-logo;
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  max-height: 50px;

  .navbar-header {
    a { color: white;}
    .navbar-toggle .icon-bar { color: red;}
  }

  #menu ul li a{
    color: gainsboro;
  }
}