Question

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

代码示例如下：https://codesandbox.io/s/yq5jvl9lz9

当视口宽度足够时，它的外观如下：

这或多或少是我想要的：

非常感谢您的帮助！谢谢，Nat

编辑12/22/18：从下面@Cristian的信息开始，我修改了这个例子。除了display: inline-block之外，我还需要width: 100%。不幸的是，在较大的屏幕尺寸下，“品牌”现在与菜单项不一致：

任何其他修复程序表示赞赏！我已将其发布为fresh question，因此答案可以去那里（以及接受答案的要点！）

Answer 1

我认为className='m-auto'的{{1}}足够

Answer 2

这是另一种解决方案，您可以在导航栏周围使用来自react-bootstrap的Container。它将使导航栏与主要部分对齐。在更大宽度的屏幕上，它将看起来更好！希望对您有所帮助！

Answer 3

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

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

示例：

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

Answer 4

将导航栏内容放在对我有用的 <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>
    );
}

Answer 5

我刚刚看到了您遇到的问题。我遇到过同样的问题。我只是从react-bootstrap中取出了普通的导航栏，并用我的徽标切换了导航栏品牌。我使用样式化组件

添加了

margin-right: 35vw;

更改徽标的样式。因此，它将所有链接推到页面的中间。您可以在https://react-bootstrap.github.io/components/navbar/下找到导航栏的代码。

我希望它能对您有所帮助。

Answer 6

也许已经晚了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，列表不胜枚举），则它们不在中间使用徽标，而在左侧使用徽标。这是一个标准，所以这就是为什么没有太多建议的原因。我不建议使用我提供的解决方案，除非这恰恰是您实现目标的唯一方法。

如何将navbar置于react-bootstrap中心

6 个答案: