2014-01-15 3 views
-2

Как создать раскрывающийся список с помощью Bootstrap?Создать drop down используя Bootstrap

меню навигации Текущий выглядит следующим образом:

<div class="container"> 
    <div class="header"> 
    <ul class="nav nav-pills pull-right"> 
     <li class="active"><a href="index.php">Home</a></li> 
     <li><a href="chat.php">Chat</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="members.php">Members</a></li>> 
     <li><a href="about.php">About</a></li> 
     <li><a href="help.php">Help</a></li> 
    </ul> 
    <h3 class="text-muted">Site</h3> 
    </div> 

Я пытался что-то вроде:

<div class="container"> 
    <div class="header"> 
    <ul class="nav nav-pills pull-right"> 
     <li class="active"><a href="index.php">Home</a></li> 
     <li><a href="chat.php">Chat</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="members.php">Members</a></li> 
     **<div class="dropdown"> 
     <li><a href="dropdown.php">Drop down</a></li> 
     </div>** 
     <li><a href="about.php">About</a></li> 
     <li><a href="help.php">Help</a></li> 
    </ul> 
    <h3 class="text-muted">Site</h3> 
    </div> 

Это не работает, как капля вниз.

+1

Вы пробовали, следуя инструкциям на веб-сайте [Bootstrap] (http://getbootstrap.com/components/#dropdowns)? – Zhihao

+1

Stackoverflow не предназначен для использования * перед тем, как читать документацию, особенно Bootstrap, в которой есть пояснения и примеры кода ... –

ответ

0
<div class="dropdown"> 
    <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

См: http://getbootstrap.com/components/#dropdowns

http://getbootstrap.com/components/#btn-dropdowns

http://getbootstrap.com/components/#navbar