Question

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

当我缩小屏幕并且按钮合拢时。我点击它我想只有那个导航栏扩展。但他们都扩大了。

我首先尝试使用HTML，CSS和JavaScript，这很有用。我不得不改变JavaScript并给导航栏一个id，所以JavaScript知道要扩展哪一个。此处还有来自其他人的JavaScript问题：Two Responsive Nav bar in Bootsrap Page Conflicts

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

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");

GWT-Bootstrap：两个响应式导航栏发生冲突

1 个答案: