title: Bootstrap 3 justified nav-pills with multiple lines
body: <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>