Twitter bootstrap 如何在React引导导航栏中获取按钮？

因此，显然不能将DOM元素放入React引导程序的导航栏中。我想在我的站点标题中添加一个登录按钮。标题由my徽标和React引导导航栏组件组成。我当前的所有Navbar子项都是NavItem组件

我希望登录按钮是导航栏可折叠（汉堡包菜单）部分的一部分，但与其他导航项不同，此按钮不是用来改变URL路径的链接。单击时，登录按钮将仅呈现React引导模式组件

如何使登录按钮成为导航栏的一部分

我的代码

<Navbar staticTop inverse collapseOnSelect>
   <Navbar.Header>
       <Navbar.Brand id="navbarBrand">
           <img id="logoImg" src="/images/bvLogo.svg" />
       </Navbar.Brand>
       <Navbar.Toggle />
   </Navbar.Header>
   <Navbar.Collapse>
       <Nav pullRight>
           <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem>
       </Nav>
   </Navbar.Collapse>
</Navbar>
<Button id="loginBtn" onClick={this.open}>Login</Button>

家
商店
关于
运货马车
登录

RouteNavItem是我编写的自定义组件，但它与登录按钮的功能无关

****编辑****

这是一个链接到一张图片，我希望该网站的标题看起来如何。。。 组件中的所有内容都将位于汉堡包菜单中

因此，您需要在折叠组件中添加按钮，如下所示：

<Navbar.Collapse>
    <Nav pullRight>
         <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem>
     </Nav>
     <Navbar.Form pullRight> 
         <Button bsStyle="primary">Login</Button>
    </Navbar.Form>
</Navbar.Collapse>

家
商店
关于
运货马车
登录

---

注意：用于正确对齐

登录按钮保持在导航栏的左侧，即使它是在导航及其RouteNavItem子项之后指定的。如何使登录按钮位于链接右侧？@jtylerm尝试将“className=”向右拉“”添加到“登录”按钮，但它仍保留在链接右侧left@jtylerm您还需要从

NavBar

中删除

pullRight

属性。下面是一个如何做到这一点的例子。我试着让按钮成为导航栏的一部分，导航栏位于页面的右侧，页面的左侧有一个徽标图像。如果我使用链接将pullRight从导航中移除，那么它将呈现为徽标，导航链接位于左侧，登录按钮位于右侧。难道没有办法让按钮只是导航的一部分，链接在右边，标志在左边吗？