如何在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>