Bootstrap 3.0 - Dropdown inside a Tab

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<ul class="nav nav-tabs tabs-student">
  <li class="active"><a href="#tab-activity">Activity</a></li>
  <li class=""><a href="#tab-sales">Sales</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab-activity">
      <div class="btn-group left">
          <button class="btn btn-small dropdown-toggle" 
                  data-toggle="dropdown">
              Activity DropDown
              <span class="caret caret-fix"></span>
           </button>
           <ul class="dropdown-menu class-list scrollable-menu center">
              <li><label id="1" class="link active">test1</label></li>
              <li><label id="2" class="link">test2</label></li>
           </ul>
       </div>
  </div>
  <div class="tab-pane" id="tab-sales">
     Sales Tab
  </div>
</div>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/20376647/1366033'>Bootstrap droppdown inside tabs is not visible</a><br/>
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>

JavaScript

$(document).ready(function () {
    $('.tabs-student a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});