自动换行在 react-bootstrap 导航栏中不起作用

Question

我正在尝试在 react-bootstrap 中制作响应式导航栏。一旦我开始使用 h4，我想开始正常的自动换行，但无论如何，当我尝试测试它在 chrome 中的响应时，h4 文本超出了右边 div 容器的范围。导航栏悬停在动态地图上方，这就是 z 值为 2 的原因。这是 js 文件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Navbar, Nav, NavItem, NavDropdown, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';

export default function Routing(props) {
   return (
        <>
            <Router>
                <Navbar collapseOnSelect className="navbar">
                    <div className="h-box">
                        <Navbar.Brand>
                            <h4>Portland Watershed Data Dashboard</h4>
                        </Navbar.Brand>
                    </div>

                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto align-items-center">
                            <Nav.Link>
                                <Link to="/"><h5 className="tiny link">Home</h5></Link>
                            </Nav.Link>
                            <Nav.Link>
                                <Link to="/page"><h5 className="tiny link">Gradient</h5></Link>
                            </Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                 <Switch>
                        <>
                            <Route exact path="/">
                                <Home />
                            </Route>
                            <Route exact path="/page">
                                <Page />
                            </Route>
                        </>
                    </Switch>
                </Map>
            </Router>

        </>
    )

这里是这些元素的 css，为了便于阅读，我删除了所有文本颜色、背景颜色和阴影。

body {
  margin: 0px;
  padding: 0px;
}
.header {
  height: 45px;
  position: fixed;
  top: 0;
}
.navbar {
  left: 0;
  position: fixed;
  top: 0;
  z-index: 2; 
  width: 100%;
  display: block;
}

.h-box {
  border: solid black;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
  padding-left: 2vh;
  padding-right: 1vh;
  text-align: center;
}
.tiny, .h-box h4 {
     display: block;
   }
.link {
  margin-right: 2vh;
}

Answer 1

将这个类名添加到 h4:

<h4 className="text-wrap">Example Headline Here</h4>

应该会解决你的问题

自动换行在 react-bootstrap 导航栏中不起作用

word-wrap not working in react-bootstrap navbar

word-wrap

navbar

react-bootstrap

responsive