Gwt 使用UiBinder引导3中的垂直导航栏
我有一个导航栏在我的项目GWT，GWTBootstrap3，UiBinder中，我想在UiBinder中垂直 在HTML中，它非常简单Gwt 使用UiBinder引导3中的垂直导航栏,gwt,uibinder,gwtbootstrap3,Gwt,Uibinder,Gwtbootstrap3,我有一个导航栏在我的项目GWT，GWTBootstrap3，UiBinder中，我想在UiBinder中垂直 在HTML中，它非常简单 <div class = "nav nav-pills nav-stacked col-sm-3"> <li> <a> Home </a> </li> <li> <a> Settings</a> </li> </div>
<div class = "nav nav-pills nav-stacked col-sm-3">
<li> <a> Home </a> </li>
<li> <a> Settings</a> </li>
</div>
<g:HTMLPanel>
<g:ScrollPanel>
<b:Container >
<b:Navbar position="FIXED_TOP">
<b:Container>
<b:NavbarHeader>
<b:NavbarBrand targetHistoryToken="{nameTokens.getHome}" ui:field="brand" text="{resources.ProductName}" />
<b:NavbarCollapseButton dataTarget="#navbar-collapse" />
</b:NavbarHeader>
<b:NavbarCollapse b:id="navbar-collapse">
<b:NavbarNav>
<b:ListDropDown ui:field="admindropdown">
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.CardHolder}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.User}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.Configuration}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
<b:NavbarNav pull="RIGHT">
<b:ListDropDown >
<b:AnchorButton text="{resources.SelectedLanguage}" dataToggle="DROPDOWN" />
<b:DropDownMenu >
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageDK" url="/images/DK.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageNO" url="/images/NO.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageUK" url="/images/UK.png" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown ui:field="loginfield">
<b:AnchorButton dataToggle="DROPDOWN" ui:field="loginname" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
</b:NavbarCollapse>
</b:Container>
</b:Navbar>
<b:Row>
<b:Column size="XS_12">
<g:SimplePanel ui:field="contentContainer" />
</b:Column>
</b:Row>
</b:Container>
</g:ScrollPanel>
</g:HTMLPanel>
似乎您弄错了-您的HTML示例使用导航丸，而UiBinder one使用导航栏导航栏、导航栏标题等。。从Bootstrap和gwtbootstrap3的文档中可以看出，不可能实现垂直堆叠，正如他们在docs导航栏中所说的那样。但也有可能获得垂直/堆叠导航： 项目1 项目2 项目3
有关更多示例，请参阅。您似乎弄错了-您的HTML示例使用导航丸，而UiBinder one使用导航栏导航栏、导航栏标题等。。从Bootstrap和gwtbootstrap3的文档中可以看出，不可能实现垂直堆叠，正如他们在docs导航栏中所说的那样。但也有可能获得垂直/堆叠导航： 项目1 项目2 项目3
有关更多示例，请参见。我采用了另一种方法解决该问题，并在引导中使用了网格系统。因此，当我们在桌面上时，我会显示一个侧导航栏，当在平板电脑/手机上时，我会显示导航栏。它需要稍微调整一下，但这是我遇到的问题的关键部分 这是我的UiBinder代码
<b:Container>
<b:Row>
<b:Column size="XS_12,SM_12,MD_10,LG_10" visibleOn="XS_SM">
<b:Navbar position="FIXED_TOP">
<b:Container>
<b:NavbarHeader>
<b:NavbarBrand targetHistoryToken="{nameTokens.getHome}"
ui:field="brand" text="{resources.ProductName}" />
<b:NavbarCollapseButton dataTarget="#navbar-collapse" />
</b:NavbarHeader>
<b:NavbarCollapse b:id="navbar-collapse">
<b:NavbarNav>
<b:ListDropDown ui:field="admindropdown">
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.CardHolder}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.User}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.Configuration}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
<b:NavbarNav pull="RIGHT">
<b:ListDropDown addStyleNames="{style.languageImageStyle}">
<b:Image url="{resources.SelectedLanguageURL}" />
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton text="{resources.SelectedLanguage}" dataToggle="DROPDOWN" />
<b:DropDownMenu>
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageDK" url="/images/DK.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageNO" url="/images/NO.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageUK" url="/images/UK.png" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown ui:field="loginfield">
<b:AnchorButton dataToggle="DROPDOWN" ui:field="loginname" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
</b:NavbarCollapse>
</b:Container>
</b:Navbar>
</b:Column>
</b:Row>
<b:Row>
<b:Column size="MD_3,LG_3" visibleOn="MD_LG">
<b:Panel>
<b:PanelBody>
<b:PanelGroup b:id="accordion">
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseOne" text="{resources.CardHolder}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseOne" in="true" ui:field="collapseOne">
<b:PanelBody>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseTwo" text="{resources.User}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseTwo" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseThree" text="{resources.Configuration}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseThree" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseFour" text="Sprog"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseFour" in="true">
<b:PanelBody>
<b:Image addStyleNames="btn" ui:field="languageDK2" url="/images/DK.png" />
<b:Image addStyleNames="btn" ui:field="languageNO2" url="/images/NO.png" />
<b:Image addStyleNames="btn" ui:field="languageUK2" url="/images/UK.png" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseFive" text="Login"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseFive" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem2" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
</b:PanelGroup>
</b:PanelBody>
</b:Panel>
</b:Column>
<b:Column size="XS_12,SM_12,MD_9,LG_9">
<g:SimplePanel ui:field="contentContainer" />
</b:Column>
</b:Row>
</b:Container>
我采用了另一种方法来解决这个问题，并在bootstrap中使用了网格系统。因此，当我们在桌面上时，我会显示一个侧导航栏，当在平板电脑/手机上时，我会显示导航栏。它需要稍微调整一下，但这是我遇到的问题的关键部分 这是我的UiBinder代码
<b:Container>
<b:Row>
<b:Column size="XS_12,SM_12,MD_10,LG_10" visibleOn="XS_SM">
<b:Navbar position="FIXED_TOP">
<b:Container>
<b:NavbarHeader>
<b:NavbarBrand targetHistoryToken="{nameTokens.getHome}"
ui:field="brand" text="{resources.ProductName}" />
<b:NavbarCollapseButton dataTarget="#navbar-collapse" />
</b:NavbarHeader>
<b:NavbarCollapse b:id="navbar-collapse">
<b:NavbarNav>
<b:ListDropDown ui:field="admindropdown">
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.CardHolder}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.User}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.Configuration}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
<b:NavbarNav pull="RIGHT">
<b:ListDropDown addStyleNames="{style.languageImageStyle}">
<b:Image url="{resources.SelectedLanguageURL}" />
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton text="{resources.SelectedLanguage}" dataToggle="DROPDOWN" />
<b:DropDownMenu>
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageDK" url="/images/DK.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageNO" url="/images/NO.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageUK" url="/images/UK.png" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown ui:field="loginfield">
<b:AnchorButton dataToggle="DROPDOWN" ui:field="loginname" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
</b:NavbarCollapse>
</b:Container>
</b:Navbar>
</b:Column>
</b:Row>
<b:Row>
<b:Column size="MD_3,LG_3" visibleOn="MD_LG">
<b:Panel>
<b:PanelBody>
<b:PanelGroup b:id="accordion">
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseOne" text="{resources.CardHolder}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseOne" in="true" ui:field="collapseOne">
<b:PanelBody>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseTwo" text="{resources.User}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseTwo" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseThree" text="{resources.Configuration}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseThree" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseFour" text="Sprog"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseFour" in="true">
<b:PanelBody>
<b:Image addStyleNames="btn" ui:field="languageDK2" url="/images/DK.png" />
<b:Image addStyleNames="btn" ui:field="languageNO2" url="/images/NO.png" />
<b:Image addStyleNames="btn" ui:field="languageUK2" url="/images/UK.png" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseFive" text="Login"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseFive" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem2" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
</b:PanelGroup>
</b:PanelBody>
</b:Panel>
</b:Column>
<b:Column size="XS_12,SM_12,MD_9,LG_9">
<g:SimplePanel ui:field="contentContainer" />
</b:Column>
</b:Row>
</b:Container>
啊，我明白了：-但是如果你看这个例子，你会发现这是可能的，当然你可以通过一些定制的CSS达到预期的效果，就像在链接的文章中一样。但据我所知，使用vanilla Bootstrap3的类是不可能的。看看这篇文章，解决方案就是在菜单周围添加一个容器div，其中包含一个名为sidebar nav的类-你试过了吗？啊，我明白了：-但是如果你看这个例子，你会发现这是可能的，当然你可以通过一些自定义CSS（如链接文章中的CSS）来达到预期的效果。但据我所知，使用vanilla Bootstrap3的类是不可能的。看看这篇文章，解决方案就是在菜单周围添加一个容器div，并使用一个名为sidebarnav的类—您试过了吗？