bootstrap navbar navbar-nav问题

Question

我在试着改变我的导航栏。

我的实际网站是https://demo.gozpeak.com，但我不知道我的导航栏是否非常符合引导程序...(欢迎发表评论)。

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

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

我的CSS：

#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%;
}

主要的问题是，当我调整屏幕大小时(例如，对于md或sm )，navbar-nav被破坏了……一个按钮放在吧台下面，然后另一个，等等。

在这种情况下，我希望3个按钮保持对齐，(理想情况下尽可能在同一级别移动...)。

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

https://nounouenligne.fr

Answer 1

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