Question

我试图在twitter bootstrap的帮助下创建一个项目列表，其中两个是下拉菜单。这是我的尝试代码：

<div class="row">
    <ul class="nav nav-tabs">
        <li class="active span2">1</li>
        <li class="span2">2</li>
        <li class="span2">
        <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        3(Dropdown)
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
      </ul>
    </div>
        </li>
        <li class="span2">4</li>
        <li class="span2">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
        5(dropdown)
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        </ul>
        </li>
    </ul>
</div>

但是当我尝试时，第一个下拉列表工作正常，但另一个下拉列表没有下拉。谁能解释我，为什么？

Answer 1

您错过的第二个下拉列表必须包含<div class="dropdown">..</div>

试试这个

<div class="row">
    <ul class="nav nav-tabs">
        <li class="active span2">1</li>
        <li class="span2">2</li>
        <li class="span2">
        <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        3(Dropdown)
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
      </ul>
    </div>
        </li>
        <li class="span2">4</li>
        <li class="span2">
        <div class="dropdown">
            <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
        5(dropdown)
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        </ul>
        </div>
        </li>
    </ul>
</div>

DEMO

在twitter bootstrap中制作两个下拉菜单

1 个答案: