Question

我正在使用带有list-inline类的Bootstrap 3（我知道我可以使用默认设置，但我不想要任何默认样式）

<nav class='main-nav'>
  <ul class="list-inline">
    <li><a href='#'>Test</a></li>
    <li>
        <a href='#' data-toggle="dropdown">Test</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
        </ul>
    </li>
  </ul>
</nav>

http://jsfiddle.net/9kVCZ/

但是下拉列表没有显示在下方，它显示在底部。

Answer 1

您需要将班级dropdown添加到nav元素。

<nav class='main-nav dropdown'>
<ul class="list-inline">
    <li><a href='#'>Test</a></li>
    <li>
        <a href='#' data-toggle="dropdown">Test</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
        </ul>
    </li>
</ul>
</nav>

Working Fiddle

Answer 2

如果代码的目标是仅通过点击第二个“测试”来显示下拉菜单，则应将课程dropdown添加到其父<li>

<nav class='main-nav'>
    <ul class="list-inline">
        <li><a href='#'>Test1</a></li>
        <li class="dropdown">
            <a href='#' data-toggle="dropdown">Test2</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li><a href='#'>Test</a></li>
                <li><a href='#'>Test</a></li>
                <li><a href='#'>Test</a></li>
            </ul>
        </li>
    </ul>
</nav>

Updated fiddle

具有下拉列表的Bootstrap内联列表

2 个答案: