html - Meteor.js/Iron 中的 Bootstrap 下拉菜单渲染错误

Question

我正在尝试在 Meteor.js/Iron 项目上使用 Bootstrap 制作下拉菜单。出于某种原因，class="dropdown-header" 的第二个实例正在下拉菜单之外呈现。

这是一张照片：点我

相同的代码在独立运行时可以正常工作并正确呈现。

有没有其他人遇到过这样的问题？使用 Bootstrap 3.3.5 和 Meteor 1.2

        <ul class="dropdown-menu">                 
            <li class="dropdown-header">Header</li>
            <li>
                <div class="col-sm-12">
                    <div class="btn-group" role="group">
                        <button class="btn btn-primary">Add</button>
                        <button class="btn btn-success">Edit</button>
                    </div>
                </div>
            </li>
            <li class="dropdown-header">Why am I here???????</li>
            <li>
                <div class="col-sm-12">
                    <div class="btn-group" role="group">
                        <button class="btn btn-primary">Add</button>
                        <button class="btn btn-success">Edit</button>
                    </div>
                </div>
            </li>
        </ul>

Answer 1

尝试为第二个下拉菜单创建另一个 ul：

<ul class="dropdown-menu">                 
    <li class="dropdown-header">Header</li>
    <li>
        <div class="col-sm-12">
            <div class="btn-group" role="group">
                <button class="btn btn-primary">Add</button>
                <button class="btn btn-success">Edit</button>
            </div>
        </div>
    </li>
  </ul>
 <ul class="dropdown-menu">                 
    <li class="dropdown-header">Why am I here???????</li>
    <li>
        <div class="col-sm-12">
            <div class="btn-group" role="group">
                <button class="btn btn-primary">Add</button>
                <button class="btn btn-success">Edit</button>
            </div>
        </div>
    </li>
  </ul>