css - 注释导致代码显示不正确 (CSS/Bootstrap)

Question

这是我遇到的最奇怪的事情之一。 COMMENT(或缺少)导致输出发生变化。请看下面，注意 <!--和 -->在中间。

    <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>

如果我有它，它显示正常。如果我删除它，代码将停止正确显示。看这张图片:

顶级案例没有评论(出于某种原因，它显示在两行中)。最底下的情况是带有评论(正确显示)。

到底是怎么回事？

---

编辑: 我只是注意到它是否与它在同一行(即使没有评论)也能正确显示。但是一旦它在不同的线路上，它就会停止正确显示。

Answer 1

注释用于删除两个元素之间的任何空白(您可以使用 float left 获得相同的结果)

通常最好只将网格类用于网格目的。