React Bootstrap 列未填充整个宽度

Question

I'm using React and React Bootstrap 4.0. I want a side-bar of 300px on the left side of the screen which is collapsible and the rest of the screen to be where the content is rendered.

The parent component for the side-bar and content is the following:

 import React from "react"; import './Home.scss'; import {Col, Container, Row} from "react-bootstrap"; import Sidebar from "./Sidebar/Sidebar"; const Home = () => { return ( <Container fluid className={"no-gutters mx-0 px-0"}> <Row xs={2} md={2} lg={2} xl={2} noGutters={true} className={""}> <Col lg={"auto"} xl={"auto"} className={""}> <Sidebar/> </Col> <Col className={""}> <div className={"nav-bar"}/> </Col> </Row> </Container> ) } export default Home;

 .nav-bar { width: 100%; height: 100px; outline: 1px solid blue; }.col { outline: 1px solid green; }

The Sidebar component is simply a div with a width of 300px and a height of 100vh. My issue is that the second column (where the content will be rendered) seems to only take 50% of the screen up, leaving a gap to the right of it. I want it to take up the entire remaining space as the Bootstrap documentation states it should.

Can anyone spot where I have gone wrong?

Answer 1

The problem is the props on the Row . It should just look like this...

<Container fluid className={"no-gutters mx-0 px-0"}>
    <Row noGutters={true}>
        <Col sm={"auto"}>
            <Sidebar/>
        </Col>
        <Col className={"border"}>
            <div className={"nav-bar"}/>
        </Col>
    </Row>
</Container>

Demo: https://codeply.com/p/IdzE9Wtvt4