如何在移动端显示React Bootstrap Navbar.Brand品牌图片？

问题根源是你把Navbar.Brand放在了Navbar.Collapse组件内部——这个容器在屏幕小于lg（对应你设置的expand="lg"）时会被折叠到汉堡菜单里，所以移动端看不到Logo。

只需要把Navbar.Brand移动到Navbar.Toggle的同级位置（也就是Container下、Navbar.Collapse外面），就能让Logo在所有屏幕尺寸下都显示。

修改后的完整代码 #

<div>
  <Navbar className="planted-navbar" variant="dark" expand="lg">
    <Container className="navbar-container">
      {/* 将Brand移至Toggle与Collapse外部，脱离折叠范围 */}
      <Navbar.Brand href="home" bsPrefix="planted-navbar-brand">
        <img
          src={plantedLogo}
          width="150px"
          className="d-inline-block align-top"
          alt="Restorify logo"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="planted-navbar-collapse">
        <Nav className="ml-auto">
          <NavDropdown title="Missions" id="missions-dropdown">
            <NavDropdown.Item href="county-select">Select a County</NavDropdown.Item>
            <NavDropdown.Item href="mission-select">Select a Mission</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Dashboard" id="trees-dropdown">
            <NavDropdown.Item href="dashboard">My Dashboard</NavDropdown.Item>
            <NavDropdown.Item href="subscribeToTree">Subscribe To Tree</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Posts" id="posts-dropdown">
            <NavDropdown.Item href="post-tile">Posts</NavDropdown.Item>
            <NavDropdown.Item href="posts-to-write">Posts to Write</NavDropdown.Item>
            <NavDropdown.Item href="write-a-post">Write a Tree Post</NavDropdown.Item>
            <NavDropdown.Item href="login-mission-post" id="login-item">Write a Mission Post</NavDropdown.Item>
          </NavDropdown>
          <Nav.Link href="leaderboard" id="leaderboard-link">Leaderboard</Nav.Link>
          <Nav.Link href="about" id="about-link">About</Nav.Link>
          <Nav.Link href="login" id="login-link">Login</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</div>

效果说明 #

• 桌面端：Logo与导航菜单保持原有正常显示效果
• 移动端：Logo将固定显示在汉堡菜单左侧，不会被收纳进折叠菜单中

内容的提问来源于stack exchange，提问作者lhunter664