React bootstrap - 如何在移动设备中制作高度为 100vh 的导航栏

Posted 2023-03-06

【中文标题】React bootstrap - 如何在移动设备中制作高度为 100vh 的导航栏

【英文标题】：React bootstrap - how to make navBar with 100vh height when in mobile

【发布时间】：2022-01-21 21:11:58

【问题描述】：

当我通过单击菜单按钮展开 navBar 时，我希望 dropdown 具有完整高度（100vh 等），用户界面应该是这样的： 

这是移动端的当前 UI：

我该怎么做？

App.js

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Container from "react-bootstrap/Container";
import "bootstrap/dist/css/bootstrap.min.css";

import "./styles.scss";

function Header(props) 
  return (
    <>
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Link</Nav.Link>
              <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">
                  Another action
                </NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">
                  Something
                </NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">
                  Separated link
                </NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      <div>content</div>
    </>
  );


export default Header;

代码沙盒：https://codesandbox.io/s/fervent-leftpad-3sejn?file=/src/App.js

【参考方案1】：

改变css：

@media(max-width:600px) 
  .navbar 
    min-height: 100vh;
    align-items: flex-start;
  

【讨论】：

它不工作。

你添加了 !important 吗？