GWT-引导:两个响应的导航条相互冲突

Question

我正在使用GWT做一个项目，并希望使用twitter引导来进行布局。所以我现在使用的是gwt-bootstrap 2.2.1.0库。我想有两个响应肚脐，一个作为页眉和一个作为页脚。

当我缩小屏幕时，按钮就会折叠成一个。我点击它，我只想要那个肚脐扩展。但它们都在扩张。

我首先用HTML、CSS和JavaScript试了一下，这个方法很管用。我必须修改JavaScript并给导航条一个id，这样JavaScript就知道要扩展哪一个了。这里还有来自其他人的JavaScript问题：Two Responsive Nav bar in Bootsrap Page Conflicts

我的问题是，如何用gwt-引导来实现这一点。

Header.ui.xml

<g:HTMLPanel>
            <g:FlowPanel>
                <b:ResponsiveNavbar position="TOP">
                    <b:Nav alignment="RIGHT" ui:field="buttons">
                    </b:Nav>
                </b:ResponsiveNavbar>
            </g:FlowPanel>
        </g:HTMLPanel>

Footer.ui.xml

 <g:HTMLPanel>
            <g:FlowPanel>
                <b:ResponsiveNavbar position="BOTTOM">
                    <b:Nav alignment="RIGHT" ui:field="buttons">
                    </b:Nav>
                </b:ResponsiveNavbar>
            </g:FlowPanel>
        </g:HTMLPanel>

Answer 1

因为没有人能回答这个问题，所以我一直在寻找答案，最后终于找到了答案，所以我想和其他有同样问题的人分享。

/** Set the collapse button to the right target. */

//Set the right id to the header/footer.
buttons.getParent().getElement().setId("header");

//You have to go up a few tiers in the DOM.
Element ep = buttons.getParent().getElement().getParentElement();
Element ec = buttons.getParent().getElement().getParentElement().getFirstChildElement();

//Change the data-target attribute to your id.
ec.setAttribute("data-target", "#header");