title: Bootstrap putting checkbox in a dropdown
body: <p>I'm trying to put a checkbox form in a dropdown like this: </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="dropdown"&gt;
      &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;
        Dropdown Form&lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox"&gt;Two&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox"&gt;Two&lt;/label&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h3>Here is a <a href="https://www.bootply.com/jVzNlXSVGI" rel="noreferrer">Demo in Bootply</a></h3>
  
  <p>However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.</p>