google chrome - Navbar occasionally renders in two lines -


i'm having strange behavior using bootstrap's navbar nav. have normal text , label span in 1 of navigational elements , span ends in new line rendering whole navbar higher should be. strangest thing happens (~50% of time), without me changing conditions (same screen size, same page/content, etc.). also, able reproduce in chrome not in firefox.

as use dev-tools adjust css settings, span jumps in place, i'm out of idea how debug or experiment fixes.

any ideas or suggestions on:

  1. how debug issuse?
  2. what cause?

here how looks broken:

enter image description here

and how should be:

enter image description here

and here excerpt of header. unfortunately have lot of code in full header (and it's angular app things controlled dynamically), i'm not excluding possibility problem somewhere else, i'm having hard time reproducing regularly full code, didn't think making plunker case easy.

<header class="navbar navbar-default navbar-fixed-top ng-scope">   <nav class="collapse navbar-collapse navbar-ex1-collapse">     <ul class="nav navbar-nav navbar-right">       <li class="divider-vertical hidden-xs"></li>       <li id="home-button">         <a href="/">home</a>       </li>       <li id="library">         <a href="/library">library         <span class="small label label-primary label-super">new</span>         </a>       </li>     </ul>   </nav> </header> 


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -