title: Stop list item stacking in bootstrap navbar
body: <p>I've created a bottom navbar (footer) in Twitter Bootstrap to contain some social media links:</p>
  
  <p><img src="https://i.stack.imgur.com/nSwTW.jpg" alt="NavBar1"></p>
  
  <p>There's a break-point at which the unordered list items (<code>li</code>) become stacked vertically rather than horizontally:</p>
  
  <p><img src="https://i.stack.imgur.com/5VoI4.jpg" alt="NavBar2"></p>
  
  <p>I can see this behaviour is desirable for using the navbar with headings (I'm using it on my top navbar), but since I'm just using this bottom one for icons, I don't want them stacked vertically as there's plenty of width for them to line-up horizontally down to a mobile screen.</p>
  
  <p>How can I disable this behaviour on just my bottom navbar?</p>
  
  <p>I'd also be interested to know whether the phone number and icon I have in my left-side nav items could disappear when the width of the device is less than the width of the phone number and social media icons.</p>
  
  <p>Bootstrap version is 3.3.2.</p>
  
  <p><strong>Update</strong>: here's a fiddle <a href="http://jsfiddle.net/0jqssmmb/" rel="nofollow noreferrer">http://jsfiddle.net/0jqssmmb/</a></p>