<p dir="auto">The follow case where link buttons and input type=submit (or type=button) result in btn-group's not aligning within the btn-toolbar in all major browsers.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &lt;div class=&quot;btn-toolbar&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
          &lt;input name=&quot;commit&quot; id=&quot;commit&quot; type=&quot;submit&quot; class=&quot;btn&quot; value=&quot;Update&quot;/&gt;
          &lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;Remove&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;Cancel&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;"><pre class="notranslate">  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn-toolbar"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn-group"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"commit"</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"commit"</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"submit"</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn"</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"Update"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"#"</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn"</span><span class="pl-c1">&gt;</span>Remove<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn-group"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"#"</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn"</span><span class="pl-c1">&gt;</span>Cancel<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">My work around was to set chained .btn-group to margin-bottom the same value as .btn-toolbar, which isn't getting picked up by any chained .btn-group's. Here's the css override:</p>
<p dir="auto">.btn-group + .btn-group {<br>
margin-bottom: 9px;<br>
}</p>
<p dir="auto">Here's the original bootstrap 2.0 css:</p>
<p dir="auto">.btn-group + .btn-group {<br>
margin-left: 5px;<br>
}</p>
<p dir="auto">.btn-toolbar {<br>
margin-top: 9px;<br>
margin-bottom: 9px;<br>
}</p>
<p dir="auto">Hi folks - first of all great job with the 2.0 release :)</p>
<p dir="auto">Apologies if this is a duplicate, had a look through (I know there are a lot of new tickets) but couldn't find anyone who'd reported this issue.</p>
<p dir="auto">When you have your browser width at <em>exactly</em> 768px wide (e.g. iPad in portrait mode), two media queries in the responsive css file overlap: those targetting <code class="notranslate">max-width:768px</code> and <code class="notranslate">min-width:768px</code>. The net result of this is that whilst the max-width query sets <code class="notranslate">.row { margin-left:0 }</code> this is overridden by the next query which re-instates <code class="notranslate">margin-left:-20px</code>.</p>
<p dir="auto">This means that when viewing a page at exactly 768px wide, the content suddenly butts up against the left hand side of the screen.</p>
<p dir="auto">I haven't submitted with a PR with a fix as I'm not sure what the most graceful solution is, so I've temporarily worked around it by adding my own rule for an exact width of 768px and setting <code class="notranslate">margin:0</code>.</p>
<p dir="auto">Cheers!</p>
<p dir="auto">Nick</p>