2014-10-22 2 views
1

К сожалению, я не могу понять это.Получить выпадающее меню под кнопкой Bootstrap

Надеюсь, гуру css/bootstrap может показать мне путь в темноте.

http://fmjd.org/sandbox/

image При нажатии на «Выпадающий» Я ожидаю, что меню будет открыт под кнопкой. Но он идет влево. Что не так в выборе классов/css?

спасибо.

ответ

4

Прежде всего, вам нужно заставить себя проверить правильность правильности веб-страницы в W3C Validator. У вашего кода было 8 выпусков. Я исправил их первым. Затем я проверил официальную документацию Bootstrap, как сделать Dropdowns and Button Groups. Я почти укомплектовать имитировал фрагмент кода документации, в результате чего:

Result

Весь код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title> 
      5 
     </title> 
     <!-- Le styles --> 
     <link href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"> 
     </script> 
     <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"> 
     </script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-small">Book</button> 
       <button type="button" class="btn btn-small">China</button> 
       <button type="button" class="btn btn-small">Computers</button> 
       <button type="button" class="btn btn-small">Electronica</button> 
       <button type="button" class="btn btn-small btn-primary">GSM</button> 
       <div class="btn-group"> 
         <button type="button" class="btn btn-small btn-default dropdown-toggle" data-toggle="dropdown"> 
          Dropdown 
          <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu" role="menu"> 
          <li> 
           <a href="#">Action</a> 
          </li> 
          <li> 
           <a href="#">Another action</a> 
          </li> 
          <li> 
           <a href="#">Something else here</a> 
          </li> 
         </ul> 
       </div> 
       <button class="btn btn-small">Software</button> 
      </div> 
     </div> 
    </body> 
</html> 

Удачи!

Смежные вопросы