A Comment is causing code to display incorrectly (CSS/Bootstrap) -


this 1 of strangest things have encountered. comment (or lack thereof) causing output change. see below, notice <!-- , --> in middle.

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">         <div class="row">             <div class="col-xs-6 col-md-8 col-lg-8 vertical-center">                 <h2>                     test                     <small>                         <span>test</span>                     </small>                 </h2>             </div><!--         --><div class="col-xs-6 col-md-4 col-lg-4 vertical-center">                 <h2 class="text-right skip-pause-buttons">                     <span class="glyphicon glyphicon-step-backward"></span>                     <span class="glyphicon glyphicon-pause"></span>                     <span class="glyphicon glyphicon-step-forward"></span>                 </h2>             </div>         </div>     </nav> 

if have there, displays okay. if remove it, code stops displaying correctly. see image:

enter image description here

the top case without comment (for reason displays on 2 lines). bottom case comment (displays correctly).

what on earth going on?


edit: noticed if on same line (even without comment) displays correctly. it's on different line, stops displaying correctly.

the comments used remove whitespace between 2 elements (you can achieve same results float left)

usually better use grid classes grid purpose.


Comments

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -