title: Bootstrap - Fluid navbar items
body: <p>I'm a newbie bootstrap user, currently I want to create a fluid navigation bar, but when I shrink the browser the navigation bar becomes weird.</p>
  
  <p>Before shrinking:</p>
  
  <p><img src="https://i.stack.imgur.com/9M640.png" alt="enter image description here"></p>
  
  <p>After shrinking further:</p>
  
  <p><img src="https://i.stack.imgur.com/uiERG.png" alt="enter image description here"></p>
  
  <p>As you can see, the second image is pretty bad.. One possible way I thought is to separate the words into 2 lines (e.g. line 1 - goto, line 2 - Hello_World!). Can anyone give me a better approach for this issue? Thanks in advance.</p>
  
  <p>Current HTML code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand logo-container" href="#"&gt;&lt;img class="logo" alt="Logo" src="images/test.png" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="code"&gt;goto &lt;/span&gt;&lt;span class="section-name"&gt;Hello_World!&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="code"&gt;goto &lt;/span&gt;&lt;span class="section-name"&gt;About_Me&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="code"&gt;goto &lt;/span&gt;&lt;span class="section-name"&gt;Life_Graph&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="code"&gt;goto &lt;/span&gt;&lt;span class="section-name"&gt;Skill_Trees&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="code"&gt;goto &lt;/span&gt;&lt;span class="section-name"&gt;Feat_Stacks&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="code"&gt;goto &lt;/span&gt;&lt;span class="section-name"&gt;Codetact_Me&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>HERE IS MY <a href="http://jsfiddle.net/52VtD/10792/" rel="nofollow noreferrer">FIDDLE</a>...</p>