Jquery 如何获得引导响应（弹性）导航栏链接？

我试图在引导导航栏（固定导航栏）中获得几个弹性（响应？）链接，但似乎无法使其工作。我不需要整个导航栏都能响应并自动折叠，因为我在特定屏幕宽度下实现了自己的自定义折叠行为，但我只需要导航栏上的两个链接区域根据窗口宽度进行扩展或收缩，而导航栏上的其他按钮保持相同大小。（我在下面的代码中使用s强制链接区域宽度，使它们在我的屏幕上暂时看起来正确）

试图使用各种标准引导类（例如对齐按钮或对齐导航栏）来实现这一点，要么产生了导航栏全宽的链接，从而将所有其他内容推到其他行上，要么链接区域保持其实际文本内容的宽度，而不是扩展以填充可用空间

我需要在最左边的navbar品牌标志，在最右边我有几个按钮（包括下拉菜单），需要保留在右边。我想用2个弹性/响应链接区域填充中间的空间，这些区域的大小根据窗口宽度而变化

代码如下。感觉我把事情搞得太复杂了，但不确定如何/在哪里，因为我需要将我的按钮保持在垂直居中的右侧

非常感谢您的帮助和建议

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
      <div class="navbar-header" style="margin-top:5px;">
         <a class="navbar-brand" style="height:30px; padding-top:5px; padding-bottom:5px;" href="#"><img src="img/logo.png"></a>
      </div>

   <div style="height: 1px;"> <!-- inner div -->
      <form class="navbar-form navbar-right form-inline">
         <a href="#"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; My Link Text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         </a>
         <a href="#"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; My Other Link Text &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         </a>

         <a class="btn btn-xs btn-success">Button 1</a>&nbsp;&nbsp;

         <div class="btn-group">
            <button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Drop down 1
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu Item 2</a></li>
                </ul>
            </div>&nbsp;&nbsp;

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Button with another style</a></li>
                <li>
                    <div class="dropdown">&nbsp;&nbsp;
                        <a href="#" data-target="#" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">2nd dropdown</a>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a href="#">Menu item 1</a></li>
                            <li><a href="#" id="saveonline">Menu item 2</a></li>                            
                        </ul>
                    </div>
                </li>
            </ul>
        </form>
    </div> <!-- /inner div -->
  </div> <!-- /container-fluid -->
</div> <!-- /Top div -->

你可能想发布一个你正在尝试做的事情的模型（特别是关于可扩展链接如何运行的），因为HTML不清楚。好的建议，谢谢。我重新思考了我的问题并简化了它，认为最好在这里提交一个新帖子：