Как ограничить ширину панели навигации с помощью react bootstrap

#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 свойство.