如何将Navbar放置在react-bootstrap中

Question

我希望这是一个简单的问题，而且我看到有些人也提出了有关引导程序的类似问题。我无法将这些答案之一转化为适合我的解决方案，而且我认为在任何情况下都可能有一个更简单的react-bootstrap答案。

代码示例在这里：https : //codesandbox.io/s/yq5jvl9lz9

视口足够宽时，外观如下所示：

这大概是我想要的：

对你的帮助表示感谢！谢谢，纳特

编辑12/22/18：从下面@Cristian的信息开始，我修改了示例。我需要display: inline-block除width: 100%。不幸的是，在更大的屏幕尺寸下，“品牌”现在与菜单项未对齐：

任何其他修复程序表示赞赏！我已经将此问题发布为新问题，因此答案可以去那里（并列出可接受的答案！）

Answer 1

我认为className='m-auto'在Nav足够

Answer 2

我有同样的问题，这对我有用：

添加className="justify-content-center"到父级。

例子：

<Navbar className="justify-content-center">
    <Navbar.Brand/>
</Navbar>

Answer 3

也许晚了一年，但我也遇到了同样的问题，但找不到答案。我发现内联 css 对我不起作用，所以我必须定义一个用于样式设置的自定义类。

解决您的问题的方法是使用导航栏品牌或任何其他元素的样式text-align: center，但是，除非您还指定，否则这将不起作用width: 100%。请访问我提供的链接以查看我解决问题的方法。

这是 OP 上次编辑后的编辑：

我找到了两种方法来实现您想要实现的目标。一种不是很敏感，我不推荐。

第一种方法：

删除 CSS 中的所有内容，只留下

.center-navbar {
  width:30%;
  margin-left: 35%;
}

第二种方法：

删除 css 中的所有内容，您将使用React Bootstrap 提供的布局网格。现在 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，这样的例子不胜枚举），他们不会在中间使用徽标，而是在左侧。这是一个标准，因此没有太多建议。我不建议使用我提供的解决方案，除非这正是您实现您想要实现的目标的唯一方法。