#reactjs #jsx #react-bootstrap
#reactjs #jsx #react-bootstrap
Вопрос:
таким образом, мой компонент navbar занимает всю ширину моей страницы. Это нормально, но я хотел бы зафиксировать содержимое в моей навигационной панели до относительной ширины, например 70vw. Как и здесь, при переполнении стека (по крайней мере, при использовании большего экрана) содержимое всей страницы не занимает всю ширину, оставляя свободное место с левой и правой стороны.
Мой компонент выглядит так:
import logo from "../assets/images/logo.svg";
import { Link } from "react-router-dom";
import { Nav, Navbar } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
const menuItems = {
"Home": ["/"],
"Editor": ["/editor-menu", "/editor-main"],
"Premium⭐": ["/premium"]
};
const NavbarComp = () => {
return (
<Navbar bg="dark" expand="sm" variant="dark">
<Link to="/" className="navbar-brand">
<img
alt="FitSet logo"
src={logo}
width="30"
height="30"
className="d-inline-block align-top mr-2"
/>
FitSet
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
{Object.entries(menuItems).map(([key, value]) => (
<Link
key={key}
to={value[0]}
className={
(value.includes(window.location.pathname) amp;amp;
"text-white") " nav-link"
}
>
{key}
</Link>
))}
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default NavbarComp;
Я новичок в react и очень хочу учиться, поэтому, если какие-либо строки можно каким-то образом оптимизировать или улучшить, обязательно дайте мне знать.
Комментарии:
1. Вы можете создать новый css-файл, импортировать его в свой компонент и переопределить
width
свойство.