Question

我有2个bootstrap ul和一个是美化而另一个不是，我的问题是为什么第一个ul没有正确渲染是没有美化，有什么不对？如何在第二个ul中看到与第一个ul坚果美化te空格相同的小提琴例子正确添加...

相同的HTML但没有美化

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

相同的HTML但美化是正确呈现

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

Answer 2

可能是由于您的代码结构。如果你构建顶部的那个像底部那个那么它应该工作

http://i.imgur.com/3v4M7Lw.png

下面是我改变了什么的屏幕截图

Answer 3

第一个示例中的连续html标记会删除元素之间的空格。第二个示例在标记中有空格，这会导致正确对齐的按钮。

bootstrap：相同的html无法正确呈现

3 个答案: