使用bootstrap.min.css后，为什么我的菜单栏项会从菜单栏中移出

Question

最近我创建了一个自动导航栏，可以在移动平台上自动调整大小。但是现在添加bootstrap.min.css之后，整个菜单栏项从导航栏移出。我试图改变一些我的CSS代码，但我仍然无能为力。

这是导航栏的html编码

 <nav class="navbar navbar-default navbar-fixed-top sb-slide" role="navigation">
  <!-- Left Control -->
  <div class="sb-toggle-left navbar-left">
    <div class="navicon-line"></div>
    <div class="navicon-line"></div>
    <div class="navicon-line"></div>
  </div><!-- /.sb-control-left -->

  <!-- Right Control -->
  <div class="sb-toggle-right navbar-right">
    <div class="navicon-line"></div>
    <div class="navicon-line"></div>
    <div class="navicon-line"></div>
  </div><!-- /.sb-control-right -->

  <div class="container">
    <!-- Logo -->
    <div id="logo" class="navbar-left">
      <a href="http://plugins.adchsm.me/slidebars/"><img src="http://plugins.adchsm.me/slidebars/images/slidebars-logo@2x.png" alt="Slidebars Logo" width="118" height="40"></a>
    </div><!-- /#logo -->

    <!-- Menu -->
    <ul class="nav navbar-nav navbar-right">
      <li class = "dropdown"><a href="#" class = "dropdown-toggle" data-toggle = "dropdown"><span>About Us</span><b class = "caret"></b></a>
        <ul class = "dropdown-menu">
          <li data-slide = '1'><a href = "#">Philosophy</a></li>
          <li><a href = "#">Founding Members</a></li>
          <li><a href = "#">Committee</a></li>
          <li><a href = "#">Code of Ethics</a></li>
        </ul>
      </li>
      <li data-slide='2'><a href="#">Digital Ecosystem</a></li>
      <li data-slide='3'><a href="#">Fellow & Members</a></li>
      <li data-slide='4'><a href="#">SIGs</a></li>
      <li data-slide='5'><a href="#">Local Chapters</a></li>
      <li data-slide="6"><a href="#">Membership Applications</a></li>
      <li data-slide="7"><a href="#">Events</a></li>
      <li data-slide="8"><a href="#">Our Service</a></li>
      <li><a id="top-arrow" href="#top">^</a></li>
    </ul>
  </div>
</nav>

任何人都可以帮我解决这个问题。