GWT-Bootstrap：兩個響應式導航欄衝突

我正在GWT中做一個項目，並且想要使用twitter bootstrap進行佈局。所以我現在使用gwt-bootstrap 2.2.1.0庫。我想有兩個響應式導航欄，一個是頁眉，一個是頁腳。GWT-Bootstrap：兩個響應式導航欄衝突

當我縮小屏幕和按鈕合併成一個。我點擊它我希望只有那個導航欄擴展。但他們都在擴大。

我首先嚐試了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>

來源

2013-10-17 Niek Verduin

既然沒有人能回答這個問題，我一直在尋找，並試圖爲答案，終於找到一個，所以我想與其他可能有同樣問題的人分享。

/** 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-13 07:42:20

GWT-Bootstrap：兩個響應式導航欄衝突

回答

相關問題