使用 pullRight 道具溢出右浮动导航 |反应引导/反应 [英] using pullRight prop overflows right floated nav | React-Bootstrap/React

问题描述

这是我的超级基本 React 组件，它使用 react-bootstrap 呈现导航栏:

Here is my super basic react component that renders a navbar using react-bootstrap:

import React, { Component } from "react";
import { Nav, NavItem, Navbar, Grid } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

export default function Header() {
  return (
    <Navbar collapseOnSelect>
      <Navbar.Header className="mr-auto">
        <Navbar.Brand>
          <LinkContainer to="/">
            <a>User Management via Redis</a>
          </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Nav pullRight>
        <LinkContainer exact to="/">
          <NavItem>Search</NavItem>
        </LinkContainer>
        <LinkContainer to="/users">
          <NavItem>All Users</NavItem>
        </LinkContainer>
      </Nav>
    </Navbar>
  );
}

我希望我的导航链接正确浮动，但不幸的是，遵循 react-bootstrap 文档并将 pullRight 属性添加到 Nav 元素会使右浮动导航溢出.

I want my navigation links to be floated right, but unfortunately following the react-bootstrap docs and adding pullRight prop to the Nav element makes the right floated nav overflow.

我可以通过给右侧浮动导航一个 ID 和 -30px 的左边距轻松解决这个问题，但我宁愿不这样做，因为实际的文档显示了很好的工作示例.如何使用 pullRight 道具让 Nav 在 NavBar 中很好地定位自己?

I can easily solve the problem by giving the right floated nav an ID and a margin-left of -30px, but I'd rather not since the actual docs show nicely working examples. How can I get the Nav with the pullRight prop to nicely position itself in the NavBar?

这是显示问题的图像:

推荐答案

可能你不再需要这个了.但是对于任何在这方面磕磕绊绊的人，这里有一个可行的解决方案(它对我有用，因为pullRight"由于某种原因也不起作用):

Probably you don't need this anymore. But for anyone stumbling over this, here is a working solution (it worked for me, as "pullRight" didn't work either for some reason):

<Nav className="ml-auto">

这篇关于使用 pullRight 道具溢出右浮动导航 |反应引导/反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！