<p dir="auto">Hey there,<br>
if the tabs have different heights, the style gets broken. This is because you style the  tag below the </p><li> tag and not the </li><li> tag itself.<p dir="auto"></p>
<p dir="auto">Attached a screenshot :)</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1012403/4370056/74e4c234-4304-11e4-9212-c36fa7234bc7.png"><img src="https://cloud.githubusercontent.com/assets/1012403/4370056/74e4c234-4304-11e4-9212-c36fa7234bc7.png" alt="screenshot" style="max-width: 100%;"></a></p></li>
<p dir="auto">The current tabs break when one of them has multiple lines.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1266923/4070258/17ec9ce8-2e58-11e4-8ec3-53e2d3bb0bf3.png"><img src="https://cloud.githubusercontent.com/assets/1266923/4070258/17ec9ce8-2e58-11e4-8ec3-53e2d3bb0bf3.png" alt="screen shot 2014-08-28 at 11 24 49 am" style="max-width: 100%;"></a></p>
<p dir="auto">I fixed this in our fork of bootstrap and wanted to feed this back into here if you guys like. Happy to do a PR if you guys approve:</p>
<div class="highlight highlight-source-css-less notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// NAV TABS HEIGHT FIX
@media screen and (min-width: @screen-sm-min) {
    .nav-tabs {
        width: 100%;

        &gt; li {
            display: table-cell;
            vertical-align: bottom;
            float: none;

            &gt; a {
                margin-bottom: -1px;
            }
        }
    }
}"><pre class="notranslate"><span class="pl-c"><span class="pl-c">//</span> NAV TABS HEIGHT FIX</span>
<span class="pl-k">@media</span> <span class="pl-c1">screen</span> <span class="pl-k">and</span> (<span class="pl-c1">min-width</span>: <span class="pl-smi">@screen-sm-min</span>) {
    <span class="pl-e">.nav-tabs</span> {
        <span class="pl-c1">width</span>: <span class="pl-c1">100<span class="pl-k">%</span></span>;

        <span class="pl-k">&gt;</span> <span class="pl-ent">li</span> {
            <span class="pl-c1">display</span>: <span class="pl-c1">table-cell</span>;
            <span class="pl-c1">vertical-align</span>: <span class="pl-c1">bottom</span>;
            <span class="pl-c1">float</span>: <span class="pl-c1">none</span>;

            <span class="pl-k">&gt;</span> <span class="pl-ent">a</span> {
                <span class="pl-c1">margin-bottom</span>: <span class="pl-c1">-1<span class="pl-k">px</span></span>;
            }
        }
    }
}</pre></div>
<p dir="auto"><em>Note: This, of course, is an overwrite and would tie in a bit differently when I do the PR</em></p>
<h3 dir="auto">Result</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1266923/4070319/49bdd902-2e59-11e4-83f1-1d0ad0320f6b.png"><img src="https://cloud.githubusercontent.com/assets/1266923/4070319/49bdd902-2e59-11e4-83f1-1d0ad0320f6b.png" alt="screen shot 2014-08-28 at 12 15 54 pm" style="max-width: 100%;"></a></p>
<p dir="auto">I've tested in IE8+, Android 4.2+, iOS 6+ and Firefox, Chrome and Safari on Mac desktop</p>