React Bootstrap 列未填充整个宽度答案

【问题标题】：React Bootstrap column not filling entire widthReact Bootstrap 列未填充整个宽度
【发布时间】：2020-07-31 04:58:03
【问题描述】：

我正在使用 React 和 React Bootstrap 4.0。我想在屏幕左侧有一个 300px 的侧边栏，它是可折叠的，屏幕的其余部分是呈现内容的地方。

侧边栏和内容的父组件如下：

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;
}

Sidebar 组件只是一个宽度为 300px，高度为 100vh 的 div。我的问题是第二列（将呈现内容的地方）似乎只占据了屏幕的 50%，在它的右侧留下了一个空隙。我希望它按照 Bootstrap 文档的说明占用整个剩余空间。

谁能发现我哪里出错了？

【问题讨论】：

标签： javascript reactjs typescript sass bootstrap-4

【解决方案1】：

问题是Row 上的道具。它应该看起来像这样......

<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>

演示：https://codeply.com/p/IdzE9Wtvt4

【讨论】：

谢谢。这解决了它！