I have made a Navbar which is made using Bootstrap, it's not full width, Here is the image
I have tried adding nav-fill w-100 class but it didn't worked, Here is my Navbar.js code
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom';
export default function Navbar(props) {
return (
<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode} `}>
<div className="container-fluid ">
<Link className="navbar-brand" to="/">{props.title}</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0 ">
<li className="nav-item">
<Link className="nav-link" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">{props.aboutText}</Link>
</li>
</ul>
<div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
<input className="form-check-input" onClick={props.toggleMode} type="checkbox" id="flexSwitchCheckDefault"/>
<label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable DarkMode</label>
</div>
</div>
</div>
</nav>
)
}
Navbar.propTypes = {
title: PropTypes.string.isRequired,
aboutText: PropTypes.string.isRequired
}
Navbar.defaultProps = {
title: 'Set title here',
aboutText: 'About'
};
You can use vw instead of %. When you're using width it will take 100% of the parents width. However when you want to use the width of the view you can just
.navbar{
width: 100vw!important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.