html - The bootstrap dropdown doesn't pop up -


i created dropdown menu in bootstrap in html. button appears , caret. menu doesnt pop up. here code:

.dropdown {    color: #666666;    font-size: 11px;  }  .dropdown .btn-default {    background: #f2f2f2;    color: black;    border: none;    border-radius: 0px;    width: 150px;    height: 20px;    padding-top: 3px;    margin-top: -2px;    margin-bottom: 3px;    font-size: 11px;  }  .dropdown .btn-default,  .dropdown .btn-default:focus {    background-color: coral;    color: black;  }  .dropdown .btn-default:active,  .dropdown .btn-default .dropdown-toggle:active,  .dropdown .btn-default:hover {    background-color: coral;    color: black;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  <div class="dropdown">    lingua    <button class=" btn btn-default " type="button" data-toggle="dropdown">      <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">italiano      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li>        <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">italia</li>      <li>        <img class="dropdwn_img" src="http://www.geysir-andernach.de/navigation2012/flag_2.png">england</li>    </ul>  </div>

is i've done wrong or should change there? thanks! answer below helped have 2 dropdown buttons , menu of each of them appears under first dropdown button. how can fix that? here 2 dropdowns:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  <div class="dropdown">    lingua    <button class=" btn btn-default " type="button" data-toggle="dropdown">      <img class="dropdwn_img" src="images/flag.png">italiano      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li>        <img class="dropdwn_img" src="images/flag.png">italia</li>      <li>        <img class="dropdwn_img" src="images/flag.png">england</li>    </ul>      paese    <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">      <img class="dropdwn_img" src="images/flag.png">italia      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li>        <img class="dropdwn_img" src="images/flag.png">italia</li>      <li>        <img class="dropdwn_img" src="images/flag.png">england</li>    </ul>  </div>

you missed close dropdown , create new dropdown.

add below code before text paese

</div> <div class="dropdown"> 

note: seem missing bootstrap , jquery references. add below references head section of html.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

working code:

.dropdown {    color: #666666;    font-size: 11px;    display: inline;  }  .dropdown .btn-default {    background: #f2f2f2;    color: black;    border: none;    border-radius: 0px;    width: 150px;    height: 20px;    padding-top: 3px;    margin-top: -2px;    margin-bottom: 3px;    font-size: 11px;  }  .dropdown.btn-default,  .dropdown.btn-default:focus {    background-color: coral;    color: black;  }  .dropdown.btn-default:active,  .dropdown.btn-default.dropdown-toggle:active,  .dropdown.btn-default:hover {    background-color: coral;    color: black;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />    <div class="dropdown">    lingua    <button class=" btn btn-default " type="button" data-toggle="dropdown">      <img class="dropdwn_img" src="images/flag.png">italiano      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li>        <img class="dropdwn_img" src="images/flag.png">italia</li>      <li>        <img class="dropdwn_img" src="images/flag.png">england</li>    </ul>  </div>  <div class="dropdown">    paese    <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">      <img class="dropdwn_img" src="images/flag.png">italia      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li>        <img class="dropdwn_img" src="images/flag.png">italia</li>      <li>        <img class="dropdwn_img" src="images/flag.png">england</li>    </ul>  </div>


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -