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:
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
Post a Comment