CSS修复导航栏崩溃

我知道这是很多人都遇到过的一个问题，但我不太熟悉，而且对Bootstrap也不熟悉，我正在寻找一个全CSS解决方案，以防止我的导航栏崩溃到768 px以下：

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left list-inline contact-links">
          <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a></li>
          <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li>
          <li><a href="mailto:***@***"><span class="glyphicon glyphicon-envelope"></span></a></li>
          </ul>

      <ul class="navbar-nav navbar-right list-inline account-and-cart-links">
        <li><a href="my-account.html"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
      </ul>

  </div>

</div>

将

向左拉

和

向右拉

添加到

我猜，折叠意味着变成移动式导航栏（如果不是，你能发布小提琴或屏幕截图吗）？您需要删除CSS媒体查询768px中所有

.navbar

相关项。如果你全屏观看并缩小屏幕，你会看到顶部栏突然变成此处建议的两行，但我不知道如何使用他们的解决方案来实际修复它。你是最好的！非常感谢你！我记得“向左/向右拉”已被弃用，但事实证明它只适用于下拉菜单！

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
     <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left pull-left list-inline contact-links">
            <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone">
                </span></a></li>
            <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li>
            <li><a href="mailto:***@***"><span class="glyphicon glyphicon-envelope"></span></a></li>
        </ul>

        <ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
            <li><a href="my-account.html">
                <span class="glyphicon glyphicon-user"></span></a></li>
            <li><a href="my-cart.html">
                <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
       </ul>
     </div>
</div>