如何在react-bootstrap中居中导航栏

Question

我希望这是一个简单的问题，我看到有些人问了关于bootstrap的类似问题。我还没有能够将其中一个答案转化为适用于我的解决方案，而且我认为可能有更简单的react-bootstrap的解决方案。

代码示例在这里：https://codesandbox.io/s/yq5jvl9lz9 当视口足够宽时，它看起来像这样: 下面是大致我想要的： 非常感谢您的帮助！谢谢，Nat

编辑12/22/18:从@Cristian处得到信息后，我修改了示例。除了width:100％之外，我还需要display: inline-block 。不幸的是，在较大的屏幕尺寸下，“品牌”现在与菜单项错位了: 如果有其他解决方法，将不胜感激！我已经发布了这个新的问题，答案可以放在那里（并且被接受的答案可以得到积分！）

- Nat Kuhn

Answer 1

我认为在Nav中使用className='m-auto'就足够了。

- Leo

---

谢谢。我们如何获取这些信息？我在react-bootstrap文档中找不到它。 - mustafa1993

m-auto 对我有用。我将其设置为 me-auto。我需要再次熟悉这种符号表示法... 链接到 Bootstrap 5 符号表示法解释（我已经忘记了）https://getbootstrap.com/docs/5.0/utilities/spacing/ - Daniel Brown

Answer 2

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

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

例如：

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

- Dan-Alexandru Jecu

---

你在使用react-bootstrap吗？这个不起作用。 - undefined

Answer 3

这里有另外一种解决方案，您可以使用react-bootstrap中的Container将导航栏包裹起来，这样可以使导航栏与主要区域对齐。在屏幕宽度较大时，效果会更好！希望能对您有所帮助！

- TeslaXba

Answer 4

将导航栏内容放置在<Container>中对我有用，参见代码片段。

使用bootstrap v4.6、react v17和react-bootstrap 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>
    );
}

- Richard Logwood

Answer 5

"也许已经晚了一年，但我遇到了同样的 问题，并且找不到答案。我发现内联 CSS 对我没有用，所以我不得不定义一个自定义类来进行样式设置。解决您的问题的方法是使用 text-align: center 来对 navbar-brand 或任何其他元素进行样式设置，但是除非您还指定 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（万维网联盟），了解为什么不建议将标志放在屏幕中央。如果您查看大多数网站（Stackoverflow、亚马逊、eBay等），它们不会在中间使用标志，而是在左侧。这是一种标准，所以没有太多的建议。除非这是您实现想要达到的唯一方式，否则我不建议使用我提供的解决方案。

- Iulian

---

谢谢@cristian，不算太晚，我已经有一段时间没有在这个项目上工作了。我会看看这个并尽快回来，但我不确定具体是什么时候。 - Nat Kuhn

抱歉，伙计，我去度假了。永不放弃，只要你相信问题总有解决办法。我对你的代码不是很了解，但也许你将“width 100%”添加到了标志而不是整个div上，因此你的标志占用了可用的全部宽度！ - Iulian

别担心，伙计！希望你的假期过得愉快。width 100% 应用于整个 div 和容器，但不适用于导航栏。如果你有时间看一下并尝试一些东西，代码在这里：https://codesandbox.io/s/yq5jvl9lz9。它在小窗口中可以工作，但当你进入全屏窗口（https://yq5jvl9lz9.codesandbox.io/）时，问题就出现了。谢谢！ - Nat Kuhn

你如何在手机上使用这个解决方案来处理折叠的情况？然后它也会到中间去。是否有可能仅针对未折叠的情况进行 CSS 处理？ - TeslaXba

ネディム Sushi 开发人员 您可以使用 xs 和 md 来进行更多操作，以获得预期结果。您只想在未折叠的情况下使用 CSS？看起来不像是一个 Bootstrap 的问题，所以我建议您提出一个特殊的问题。很乐意帮忙。 - Iulian

Answer 6

我刚看到你遇到的问题。我之前也遇到了同样的问题。我只是使用了react-bootstrap中的普通导航栏，并将导航栏品牌更换为我的标志。我使用styled-components添加了一些内容。

margin-right: 35vw; 

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

希望这能帮到您。

- TeslaXba