Css 使用引导设置样式和折叠

我要疯狂地设计预先定义的引导类。首先，我在访问icon bar类时遇到了问题，它没有设置样式。其次，缩小浏览器时，导航栏会在某个点折叠，但在此之前，导航栏会重新排列为两行，但菜单会转到第二行。我希望它在没有空间让菜单和品牌同时出现在同一排时崩溃

我怎样才能解决这个问题

HTML

---

你将不得不减少锚点.nav>li>a的填充，并减少字体大小以适应一行，但我不明白：在全屏显示时，它会正确显示，但在调整大小时，当菜单进入两行时，它会被折叠。。。为什么这么晚才倒塌？最后两个列表项到达第二行，但没有其他项。从这一点开始，按钮就会弹出。那么如何设置按钮中图标栏的样式呢？当屏幕宽度小于768px时，它就会崩溃，而不是在菜单一放下就崩溃。要设置图标栏的样式，请使用此类。导航栏默认值。导航栏切换。图标栏是的，如果需要自定义引导，则不能使用CDN。对于图标栏，它适用于这些类。看见

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

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