react-bootstrap flex/justify-content 不工作答案

【问题标题】：react-bootstrap flex/ justify-content is not workingreact-bootstrap flex/justify-content 不工作
【发布时间】：2021-06-11 00:02:32
【问题描述】：

我正在使用 react、react-bootstrap、scss 进行 Instagram 克隆编码

已创建导航栏，但它没有以弹性框为中心。

我该如何解决这个问题？

为什么弹性中心不工作？

您通常如何在 react-bootstrap 中进行自定义？

Header.js

<Navbar className="navbarContainer align-items-center" fixed="top">
  <div className="nav">
    <Navbar.Brand href="/">
      <img src={insta_logo} alt="instagram_logo" />
    </Navbar.Brand>
    <Form>
      <FormControl
        type="text"
        placeholder="Search"
        className="searchBar"

      />
    </Form>
    <Nav
      navbar="false"
      className="flex-row navRight"

    >
      <Nav.Link href="/">
        <Home fontSize="24px" />
      </Nav.Link>
      <Nav.Link href="/message">
        <Send fontSize="22px" />
      </Nav.Link>
      <Nav.Link href="/explore">
        <Compass fontSize="24px" />
      </Nav.Link>
      <Nav.Link href="/favorite">
        <Heart fontSize="24px" />
      </Nav.Link>
      <NavDropdown
        title={
          <Image
            src={face}
            roundedCircle
            className="profileImg"
          ></Image>
        }
        drop="left"
      >
        <NavDropdown.Item href="#action/3.1" className="dropdownItem">
          <Profile className="marginRight" />
          <span>Profile</span>
        </NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2" className="dropdownItem">
          <Bookmark className="marginRight" />
          <span>Bookmark</span>
        </NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3" className="dropdownItem">
          <Setting className="marginRight" />
          <span>Setting</span>
        </NavDropdown.Item>
        <NavDropdown.Item href="#action/3.4" className="dropdownItem">
          <Switch className="marginRight" />
          <span>Switch Account</span>
        </NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Log Out</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  </div>
</Navbar>

header.scss

@mixin flex($justify: null, $align: null) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

.navbarContainer {
  @include flex(center);
  border-bottom: 1px solid #dbdbdb;
  z-index: 200;
  background-color: #fff;
  .nav {
    width: 940px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .searchBar {
    height: 30px;
    width: 220px;
    background-color: #fafafa;
  }
  .navRight {
    width: 225px;
    display: flex;
    justify-content: space-between;
  }
  .profileImg {
    width: 25px;
    height: 25px;
  }
  .dropdownItem {
    @include flex(null, center);
    .marginRight {
      margin-right: 8px;
    }
  }
}

屏幕 enter image description here

我使用翻译是因为我不擅长英语。如果句子不好，请谅解。

谢谢

【问题讨论】：

标签： reactjs flexbox react-bootstrap

【解决方案1】：

我找到了引导类

Bootstrap 可以使用类进行布局。

https://getbootstrap.com/docs/4.0/utilities/flex/#enable-flex-behaviors

我修改了代码

    <Navbar
      className="d-flex justify-content-center navbarContainer"
      fixed="top"
    >

【讨论】：