我希望这是一个简单的问题，并且我看到有些人就引导程序提出了类似的问题。我无法将其中一个答案转化为适合我的解决方案，我认为无论如何都可能有一个更简单的 react-bootstrap 答案。
代码示例在这里：https://codesandbox.io/s/yq5jvl9lz9
您的帮助将不胜感激！谢谢，纳特
编辑 12/22/18：从下面@Cristian 的信息开始，我修改了示例。除了width: 100%，我还需要display: inline-block。不幸的是，在更大的屏幕尺寸下，“品牌”现在与菜单项不一致：
感谢任何其他修复！我已将其发布为fresh question，因此答案可以去那里（以及接受答案的积分！）
【问题讨论】：
标签： react-bootstrap
我认为className='m-auto'Nav 就足够了
【讨论】：
我有同样的问题，这对我有用：
将className="justify-content-center" 添加到父级。
例子：
<Navbar className="justify-content-center">
<Navbar.Brand/>
</Navbar>
【讨论】：
这是另一种解决方案，您可以在导航栏周围使用 react-bootstrap 中的容器。它会将您的导航栏与主要部分对齐。在屏幕上，具有更高的宽度，它看起来会更好！希望对你有帮助！
【讨论】：
将导航栏内容放在 <Container> 中对我有用，请参阅截图。
使用 bootstrap v4.6、react v17 和 react-bootstap v1.5
"bootstrap": "^4.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2"
从 Navigation.js 中截取，见下面的<Container>：
render() {
return (
<Navbar collapseOnSelect expand="sm" fixed="top"
className="bg-light justify-content-between">
<Container>
<LinkContainer to="/">
<Navbar.Brand>
<img src={my_image} alt='my alt text' className='profile-header'/>
</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/about">
<Nav.Link>About</Nav.Link>
</LinkContainer>
<LinkContainer to="/something" activeClassName='selectedMenuItem'>
<Nav.Link>Something</Nav.Link>
</LinkContainer>
<Navbar.Text>
<Title/>
</Navbar.Text>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
【讨论】：
也许晚了 1 年，但我有相同的 problem 并且找不到答案。我发现内联 css 对我不起作用，所以我必须定义一个用于样式的自定义类。
您的问题的解决方案是使用text-align: center 设置导航栏品牌或任何其他元素的样式，但是，除非您还指定width: 100%，否则这将不起作用。请访问我提供的链接以查看我解决问题的方法。
这是 OP 上次编辑后的编辑：
我找到了两种方法来实现您想要实现的目标。一个不是很敏感，我不推荐。
第一种方法：
删除 CSS 中的所有内容并保留
.center-navbar {
width:30%;
margin-left: 35%;
}
第二种方法：
删除 css 中的所有内容，您将使用 React Bootstrap 提供的 layout grid。现在您在 Index.js 中的代码将如下所示：
import React from "react";
import { render } from "react-dom";
import { Navbar, Nav, NavItem, NavDropdown, Glyphicon, Grid, Row, Col } from "react-bootstrap";
import "./index.css";
const App = () => (
<div>
<Grid>
<Row className="show-grid">
<Col xs={4} md={4}>
</Col>
<Col xs={4} md={4}>
<div>
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>Logo</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey="a" href="#">
Link1
</NavItem>
<NavItem eventKey="b" href="#">
Link2
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</Col>
</Row>
</Grid>
<h2 style={{ textAlign: "center" }}>This is some text</h2>
</div>
);
render(<App />, document.getElementById("root"));
但是有一个问题。我建议你学习 W3C（万维网联盟）并了解为什么不建议将 Logo 放置在屏幕中间。如果您查看大多数网站（Stackoverflow、Amazon、eBay，不胜枚举），它们不会在中间使用徽标，而是在左侧使用。这是一个标准，因此没有太多建议。我不建议使用我提供的解决方案，除非这正是您完成您想要实现的目标的唯一方法。
【讨论】：
我刚刚看到您遇到的问题。我遇到过同样的问题。我刚刚从 react-bootstrap 中获取了正常的导航栏，并用我的徽标切换了导航栏品牌。我添加了，使用样式组件
margin-right: 35vw;
到标志的样式。所以它把所有的链接都推到了页面的中间。您可以在https://react-bootstrap.github.io/components/navbar/ 下找到导航栏的代码。
希望对你有帮助。
【讨论】：