Twitter bootstrap 3 XPages引导css不应用于动态生成的项

我们最近开始在我们的应用程序中添加引导程序，并在一些我相信是基本的问题上苦苦挣扎

因此，我们的页面上有一个传统的扩展库“dropDownButton”，它工作得非常好，但是对于bootstrap，我们使用bootstrap网站上建议的普通html列表菜单，除了动态生成菜单外，所有这些都工作得很好。请参阅下面的代码：

<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 Menu
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
    <li class="dropdown-submenu"><a href="#">New</a>
         <ul class="dropdown-menu">
             <li class="dropdown-submenu"><a tabindex="-1" href="#">Document</a>
                 <ul class="dropdown-menu">
                 <xp:repeat id="repeat1" rows="30" var="documentName"
                    indexVar="documentIndex">
                    <xp:this.value>
                      <![CDATA[#{javascript: //some processing; return z;}]]>
                    </xp:this.value>
                    <xp:text tagName="li" escape="false" styleClass="red">
                       <xp:this.value><![CDATA[#{javascript:
                       return '<a>' + documentName + '</a>';}]]></xp:this.value>
                     </xp:text>
                  </xp:repeat>
            </ul>
       </li> 
     </ul>  
     </li>
</ul>
</div>

菜单

在上面的代码中，除了在repeat控件中动态生成的内容外，所有内容都显示得很好。查看源代码，所有内容都是完美生成的，因此，我们认为css不会应用于动态生成的元素。现在通常情况下不应该是这样（通常应该应用css），但我不确定我们这里会错什么

任何帮助都将不胜感激

---

注意：我们现在还没有使用Bootstrap4Xpages（我们刚刚添加了特定于引导的库。

当您查看文档时，示例显示：

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

---

您上面的代码既不生成li元素的角色，也不生成anchor元素的角色。好的，您需要对代码进行重新排序以包含这些属性。

我刚刚对BS文档中的代码进行了重复测试，效果良好：

<div
                        class="dropdown">
                        <button
                            class="btn btn-sm btn-default dropdown-toggle"
                            type="button"
                            id="dropdownMenu1"
                            data-toggle="dropdown"
                            aria-expanded="true">
                            Dropdown
                            <span
                                class="caret"></span>
                        </button>
                        <ul
                            class="dropdown-menu"
                            role="menu"
                            aria-labelledby="dropdownMenu1">
                            <xp:repeat
                                var="documentName">
                                <xp:this.value><![CDATA[#{javascript:return ["Action 1", "Action 2", "Action 3"]}]]></xp:this.value>
                                <li
                                    role="presentation">
                                    <a
                                        role="menuitem"
                                        tabindex="-1"
                                        href="#">
                                        <xp:text
                                            value="#{documentName}"></xp:text>
                                    </a>
                                </li>
                            </xp:repeat>
                        </ul>
                    </div>

下拉列表

我看到您在下拉容器中使用了另一个UL-参考3.2/3.3版的文档，这是不对的。

---

请在此处查看它的现场演示：

因此，最后出现了两个问题：

重复控件的ID属性：不知何故，任何给定给重复控件的ID属性都会破坏css（可能是因为XPages中的动态ID生成？）

Stwissel的答案：有必要以某种方式添加boostrap文档（和Stwissel的答案）中提到的角色和其他属性，以获得正确的css

仅显示正确答案（仅重复循环）

---

非常感谢所有的帮助，否则就得不到这个答案。

看看整个构造都有一个问题。你也实现了吗？请检查你在实现的libs中使用的版本。文档引用了最新版本，HTML实现与旧版本不同。是的，我只是复制粘贴d是我整个代码的一部分，因此没有复制div元素..刚刚添加..无论如何我使用的是最新版本。如问题中所述，如果我静态地写下它，它工作正常，它就是不能与repeat控件一起工作（动态地），因此我认为这里的css实现没有问题..如果我错了，请纠正我..css被应用了，所以其他地方出了问题。我怀疑重复中有额外的div。向我们显示生成的HTML。还尝试使用重复属性，例如将RemoveEPeat设置为true。因此，最终发现问题的是“ID”重复控制的属性，只需添加id，它就会分解css。我已经创建了答案，因此可能对其他人有用。我将在我回到办公室后尝试添加它。谢谢。但是，从逻辑上讲，它在正常情况下也不应该工作（现在是），这是奇怪的……因此，最终发现问题，是“id”的问题重复控件的属性，只需添加id，它就会分解css。因此，最终发现问题，是重复控件的“id”属性，只需添加id，它就会分解css。

<!-- I have just removed the id="repeat1" -->
<xp:repeat rows="30" var="documentName"
                    indexVar="documentIndex"> 
                    <xp:this.value>
                      <![CDATA[#{javascript: //some processing; return z;}]]>
                    </xp:this.value>
                    <xp:text tagName="li" escape="false" role="presentation">
                       <xp:this.value><![CDATA[#{javascript:
                       return '<a role="menuitem" tabindex="-1" href="#">' + documentName + '</a>';}]]></xp:this.value>
                     </xp:text>
</xp:repeat>