1

我正在 GWT 中做一个项目，并想使用 twitter bootstrap 进行布局。所以我现在使用的是 gwt-bootstrap 2.2.1.0 库。我想要两个响应式导航栏，一个作为页眉，一个作为页脚。

当我缩小屏幕并且按钮折叠成一个时。然后我点击它，我希望只有那个导航栏展开。但它们都膨胀了。

我首先使用 HTML、CSS 和 JavaScript 进行了尝试，并且成功了。我必须修改 JavaScript 并给导航栏一个 id，所以 JavaScript 知道要扩展哪个。这里还有其他人提出的 JavaScript 问题：Bootsrap Page Conflicts 中的两个响应式导航栏

我的问题是如何使用 gwt-bootstrap 做到这一点。

头文件.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>

页脚.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>
4

1 回答 1

0

由于没有人可以回答这个问题，我一直在寻找和尝试答案，终于找到了一个，所以我想与其他可能有同样问题的人分享。

/** 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");
于 2013-11-13T07:42:20.820 回答