Bootstrap 3 justified nav-pills with multiple lines
<p>I'd like my Bootstrap nav-pills to be justified and also wrap to multiple lines.  For example, something like this:</p>

<pre><code>[ (   Pill One  ) (  Pill Two  ) ( Pill Three ) ] 
[ (       Pill Four     ) (      Pill Five    ) ]
</code></pre>

<p>If I use this for my pills:</p>

<pre><code>&lt;ul class="nav nav-pills"&gt;
</code></pre>

<p>then the pills wrap to multiple lines when needed, but the pills are not justified.  </p>

<p>If use this for my pills:</p>

<pre><code>&lt;ul class="nav nav-pills nav-justified"&gt;
</code></pre>

<p>then they are justified, but the pills don't wrap to multiple lines (instead the text with a pill wraps to multiple lines).</p>

<p>I tried adding </p>

<pre><code>.nav-pills li { white-space: nowrap; }
</code></pre>

<p>and this prevented the text from wrapping in the pills but now the pills overflow off the right side of the page.</p>

<p>Is there a way for the pills to be justified and also wrap?  I don't like the look of the unjustified pills when they wrap.</p>

<p>I should add that this is for user generated content so it needs to work for a variable number of pills and different text lengths in each.</p>