Bootstrap 3 中使用 UiBinder 的垂直导航栏答案

【问题标题】：Vertical Navbar in Bootstrap 3 using UiBinderBootstrap 3 中使用 UiBinder 的垂直导航栏
【发布时间】：2015-03-12 09:45:21
【问题描述】：

我的项目中有一个导航栏（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>

但在 UiBinder 中必须可以做到这一点。据我了解，只能将导航栏的位置设置为 FIXED_TOP、FIXED_BOTTON 等等。

我的代码是这样的

<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>

【问题讨论】：

标签： gwt uibinder gwtbootstrap3

【解决方案1】：

您似乎将Navbar 与Navs 混淆了——您的HTML 示例使用nav-pills，而UiBinder 使用Navbar（navbar、navbar-header 等）。据我所知（来自 Bootstrap 和 gwtbootstrap3 的文档）不可能实现垂直（“堆叠”，因为他们在文档中称之为）Navbar。但是是可以垂直/堆叠NavPills：

<b:NavPills stacked="true">
   <b:AnchorListItem active="true">Item 1</b:AnchorListItem>
   <b:AnchorListItem>Item 2</b:AnchorListItem>
   <b:AnchorListItem>Item 3</b:AnchorListItem>
</b:NavPills>

更多示例请参见the demo。

【讨论】：

啊，我明白了 :-) 但是如果你看一下这个例子，你会发现这是可能的jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3
好吧，您当然可以使用一些 custom CSS 来实现所需的结果（如链接文章中所示）。但是使用 vanilla Bootstrap3 的类是不可能的（据我所知）。查看文章，解决方案只是在菜单周围添加一个容器 div，其中包含一个名为“sidebar-nav”的类 - 你尝试过吗？

【解决方案2】：

我采取了另一种方法来解决这个问题，并在引导程序中使用了网格系统。因此，当我们在桌面上时，我会显示侧面导航栏，而在平板电脑/手机上时，我会显示导航栏。它需要稍微调整一下，但这是我遇到的问题的重要部分。

这是我的 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>

【讨论】：