Twitter bootstrap 引导导航栏导航栏导航问题

我正试图改变我的导航栏

我的实际网站是，但我不知道我的导航栏是否非常符合引导。。。（请随意评论）

目前，我的新导航栏如下所示：

<nav id="zpeakNavigation" class="navbar navbar-default navbar-inverse navbar-fixed" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a id="zpeakLogo" class="navbar-brand" href="index.php?page=home"><img src="views/images/gozpeak_small.png" alt="GoZpeak" title="GoZpeak!" /></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="zpeakNavbar" class="nav navbar-nav nav-pills navbar-right">
        <li class="btn navbar-btn pull-right">
          <a title="addevent" data-toggle="modal" data-target="#modalSelectQueryNotLogged"><span class="glyphicon glyphicon-calendar"> Add event </span></a>
        </li>

        <li class="btn navbar-btn pull-right">
          <a title="registration" data-toggle="modal" data-target="#modalInscription"><span class="glyphicon glyphicon-user"> Registration</span></a>
        </li>

        <li class="btn navbar-btn pull-right">
          <a title="connection" data-toggle="modal" data-target="#modalConnection"><span class="glyphicon glyphicon-log-in"> Connection</span></a>
        </li>
      </ul>
    </div>

  </div>
  <!-- /.container-fluid -->
</nav>

主要问题是，当我调整屏幕大小时（例如md或sm），导航栏导航被破坏。。。一个按钮放在吧台下面，然后一个按钮放在另一个按钮下面，等等

在这种情况下，我希望3个按钮保持对齐（理想情况下尽可能在同一水平移动…）

例如，几乎像这个网站（除了我会在之后添加一个搜索栏）：

#zpeakNavigation a {
  color:#669DD4!important;
  font-size: 12pt;
}

#zpeakNavigation a:hover {
  color: #DAE3E6!important;
}

#zpeakNavbar {
  width: 50%;
}

#zpeakNavbar li {
  margin-right: 3%;
}

#zpeakLogo img {
  margin-left: 14%;
  width: 74%;
}

replace this code to style:

#zpeakNavigation a {
  color:#669DD4!important;
  font-size: 12pt;
}

#zpeakNavigation a:hover {
  color: #DAE3E6!important;
}

#zpeakNavbar {
  width: 100%;
}

#zpeakNavbar li {
  margin-right: 3%;
}

#zpeakLogo img {
  margin-left: 14%;
  width: 74%;
}

/*responsive*/


@media (max-width: 767px) {
#zpeakNavbar {
  width: 100%;
}
#zpeakNavbar li {
    margin-right: 3%;
    text-align: left;
    width: 100%;
}
}