如何在 Bootstrap 3 中的段落元素内切换下拉菜单

Question

我想我被一个简单的问题困住了，但由于某些原因我找不到解决方案。所以我第一次在 StackOverflow 上作为成员寻求帮助。

有什么问题，你可能会问。

我正在尝试创建一个链接，以切换下拉列表，并将其放置在Bootstrap3 上的导航栏 中。 所以这非常容易，是的，我知道。但！有一个但是......这是我正在使用的代码以及我需要完成的事情：

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <p class="navbar-text">Signed in as <a href="#" data-toggle="dropdown" class="navbar-link">Mark Otto</a></p>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
</ul>

一切都是从包含的 .css / .js 文件设置的，我有导航栏的整个降价。我只需要这个：

<a href="#" data-toggle="dropdown" class="navbar-link">Mark Otto</a>

切换下拉菜单。在当前状态下，它绝对不会做任何事情。它就像一个简单的链接，这很烦人。似乎问题在于我的切换它位于 p 元素内。

我将代码粘贴到 bootply 中： Click Here

---

更新

我在另一个庄园解决了这个问题，所以这个问题现在已经过时了。

干杯！

Answer 1

试试这个

   <div class="navbar navbar-inverse">
  <div class="navbar-inner">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse collapse">
        <ul class="nav">
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">main1<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li class="dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">main2<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">item1</a></li>
                        <li><a href="#">item2</a></li>
                    </ul>
                </li>
                <li><a href="">item3</a></li>
                </ul>
            </li>          
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Main3<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.navbar-inner -->
</div>