Bootstrap导航菜单问题

Question

我是Bootstrap的新手，我只是通过阅读在线教程和文档来探索它。我只是想创建一个小POC来理解它。

第一个问题

请参阅我的截图：

如您所见，链接中的弹出菜单正对齐左侧。有没有办法让这个弹出窗口向右？我尝试过拉右派，但无济于事。

我创建了fiddle

        <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <

第二个问题

我从阅读中看到，由于可用性问题，Bootstrap不支持多级下拉。我只是希望如何解决这个问题，假设我有一个顶级的部门链接

+ Departments
  - Finance
    - Billing
    - Accounting
  - Engineering
    - IT
    - General Service

我想缩进结算/会计/ IT /一般服务，并使财务和工程部门无法点击。我确实看到一些能够支持多级下拉列表的解决方法，但因为它是bootstrap推荐所以我试着尽可能多地遵循它。有什么想法吗？

Answer 1

首先，您需要四处寻找在Bootstrap 3.x上构建的多级点击菜单。这是http://jsbin.com/pavopa/1/edit，我从Bootply复制了它。它需要CSS工作。你可能会发现其他更完整的东西。不要使用涉及悬停的悬停或解决方案。屏幕尺寸并不意味着它是移动设备。

如果您使用的是navbar-right，则下拉菜单会在右侧对齐并且会在相反的位置展开，这应该是这样的，如果您使用navbar-left下拉式菜单，它会对齐在左边。所以改变这将涉及进入Bootstrap CSS并在它出现的最小宽度中调整它。它也不是一个好主意，因为最后一个项目和其他项目，取决于宽度，可以离开屏幕，人们不能使用它。

Bootstrap的组件无法自动检测视口边缘，大多数菜单系统都没有。

Bootstrap导航的工作方式，与几乎所有点击导航系统一样：

+ Departments : this is NOT a link
  + Finance : this NOT a link
    - Billing
    - Accounting

您想要显示为下拉列表的任何内容，除非您违反正常用户体验并将文本设为链接并将箭头设置为切换，否则无法同时显示链接和切换。

如果您有关于＆＃34;财务＆＃34;的信息。将该部分设为您的第一页，例如：

+ Departments : Not a link
  + Finance : Not a link
    - Finance Overview
    - Billing
    - Accounting