html - Bootstrap : same html is not rendered correctly

Question

我有 2 个 bootstrap ul，一个被美化了，另一个没有，我的问题是为什么第一个 ul 没有正确渲染是没有被美化，有什么问题吗？您如何在第二个 ul 中的 fiddle 示例中看到与第一个 ul 相同的坚果美化 te 空格已正确添加...

Same html but not beautified

<ul id="handlers-list" class="list-group">
        <li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
    </ul>

Same HTML but beautified is render correctly

<ul id="handlers-list" class="list-group">
        <li id="GET___asdasd" class="list-group-item">
            <span>/asdasd</span>
            <span class="label label-primary">GET</span>
            <span class="label label-primary">html</span>
            <span style="display:none;">asdasdasd</span>
            <button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">
                <span class="glyphicon glyphicon-open" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info btn-sm">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-warning btn-sm">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
    </ul>

Here is a small js example:

Answer 1

行内元素之间的空白被转换为一个空格。原因是内联元素可能散布在父元素的常规内部文本中。所以给空间或在新行中输入跨度以获得预期结果

像这样尝试:

<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span> 
        <button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>
        </button>

        <button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
        </button>

        <button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
        </button>
    </li>