Question

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

尝试使用各种标准Bootstrap类（例如对齐的按钮或对齐的导航栏）来实现这一点，或者生成链接，这些链接是导航栏的整个宽度，从而将所有其他内容推送到其他行，或者链接区域保持为它们实际文本内容的宽度，而不是扩展以填充可用空间。

我需要最左边的导航栏品牌标识，而在最右边我需要保留在右侧的几个按钮（包括下拉菜单）。我想要的空间填充了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 -->

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

0 个答案: