使用 pullRight 道具溢出右浮动导航 |反应引导/反应答案

【问题标题】：using pullRight prop overflows right floated nav | React-Bootstrap/React使用 pullRight 道具溢出右浮动导航 |反应引导/反应
【发布时间】：2018-02-14 01:37:14
【问题描述】：

这是我使用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 元素会使右侧浮动导航溢出。

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

这是显示问题的图片：

【问题讨论】：

你可以尝试用流体网格包裹导航栏
删除链接容器能解决问题吗？我想知道这是否溢出了酒吧
@wnamen 不行。
@bennygenel 将导航栏包装在流体容器中也不起作用。

标签： reactjs react-bootstrap

【解决方案1】：

查看您似乎遵循的文档和示例，您似乎省略了用于可折叠导航栏的导航包装组件Navbar.Collapse。尝试像这样添加组件：

<Navbar collapseOnSelect>
  <Navbar.Header className="mr-auto">
    <Navbar.Brand>
      <LinkContainer to="/">
        <a>User Management via Redis</a>
      </LinkContainer>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav pullRight>
      <LinkContainer exact to="/">
        <NavItem>Search</NavItem>
      </LinkContainer>
      <LinkContainer to="/users">
        <NavItem>All Users</NavItem>
      </LinkContainer>
    </Nav>
  <Navbar.Collapse />
</Navbar>

【讨论】：

谢谢。不幸的是，这并没有什么不同（除了当视口变小时，它确实会折叠导航栏）。

【解决方案2】：

你可能不再需要这个了。但是对于任何对此感到困惑的人，这是一个可行的解决方案（它对我有用，因为“pullRight”由于某种原因也不起作用）：

<Nav className="ml-auto">

【讨论】：

请注意，它是ml-auto 而不是mr-auto。（“m”代表“margin”。）在我找到这个答案之前，我一直在误解这个误解。

【解决方案3】：

.text-to-right {
  direction: rtl;
  text-align: right;
}

在没有 100% 覆盖率的情况下尝试了上述方法。我通过了className="text-to-right"。

【讨论】：