title: Twitter-Bootstrap: Two dropdown-toggle buttons side by side not working properly
body: <p><strong>Intro:</strong> One of the parts of my website requires a small toolbar featuring two dropdown menus side-by side. I tried to achieve this by the following markup (simplified):</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;span id="uniqueId"&gt;Text1&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a onclick="javascript:someFunction()"&gt;Item1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a onclick="javascript:someFunction()"&gt;Item2&lt;/a&gt;&lt;/li&gt;
          ...
      &lt;/ul&gt;
      &lt;button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;span id="uniqueId2"&gt;Text2&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a onclick="javascript:someOtherFunction()"&gt;Item1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a onclick="javascript:someOtherFunction()"&gt;Item2&lt;/a&gt;&lt;/li&gt;
          ...
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to get a nice-looking two-buttons toolbar with rounded corners only on outer sides of the toolbar.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>When I click on either button, both buttons are displayed as "pressed" and I can not visually distinguish which one I have just clicked. All the other functionality is working OK - i.e. a menu is shown correctly and with correct options.</p>
  
  <p>Is there any way to make those buttons changing their styles separately?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I do know that it's very well possible to get this working by splitting my buttons into two <code>btn-group</code>s or (as @Sherbrow suggested) by using divs. <a href="http://twitter.github.com/bootstrap/components.html#buttonGroups">Bootstrap documentation</a> also suggests </p>
  
  <blockquote>
    <p>Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.</p>
  </blockquote>
  
  <p>and I'd like to know - is it possible to somehow avoid this individual wrapping and have two properly behaving dropdowns inside a single btn-group?</p>
  
  <p>I think that I'm asking about quite non-standard and undocumented behavior and I'll accept an answer "that's impossible" if no-one can suggest a way to do that.</p>