注释导致代码显示不正确（CSS / Bootstrap）

Question

This is one of the strangest things I have encountered. A COMMENT (or lack thereof) is causing the output to change. See this below, notice the <!-- and --> in the 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 I have it there, it displays okay. If I remove it, the code stops displaying correctly. See this image:

The top case is WITHOUT the comment (for some reason it displays on two lines). The bottom case is WITH the comment (displays correctly).

What on earth is going on?

---

EDIT: I just noticed if the is on the same line as the (even without the comment) it displays correctly. But as soon as it's on a different line, it stops displaying correctly.

Answer 1

The comments are used to remove any whitespace between the two elements (you can achieve the same results with float left)

Usually is better to use grid classes only for grid purpose.