React Bootstrap CSS：我希望我的 Container 元素水平填充整个页面的更多部分

Question

在 Reactjs 中，我正在创建一个包含三个大小相同的列的容器。目前我的代码创建了三列，但它们只占据页面的中心部分，在列的右侧和左侧留下了很多空间。

我希望三列横向占据整行的更多部分。

这是我的js代码：

import React from 'react';
import { Row, Col, Container } from 'react-bootstrap';

import classes from './PainPoints.css';

const painPoints = (props) => {
    return (
        <div className={classes.ContentBoxLarge}>
            <div>
                <div className={classes.SectionHeader}>
                    <h1>Industry Pain Points:</h1>
                </div>
            </div>
            <Container>
                <Row>
                    <Col className={classes.Column}>
                        <div>Excessive Fees</div>
                    </Col>
                    <Col>
                        <div>Middleman Price Markups</div>
                    </Col>
                    <Col>
                        <div>Anonymous Ticket Holders</div>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

export default painPoints;

这是我的 CSS 代码：

.ContentBoxLarge {
    padding: 80px 0;
}

.Column {
    width: 1170px;
}

.SectionHeader {
    text-indent: 150px;
    margin: 0 0 0 0;
}

@media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }

@media (min-width: 992px) {
   .container {
   width: 970px;
   }
}

@media (min-width: 1200px) {
  .container {
   width: 1170px;
   }
}

Answer 1

默认情况下在bootstrap、container、width 和max-width 中设置为一些px 之类的，

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container {
    max-width: 540px;
} 

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

你必须设置max-width: 100%喜欢，

.container {
  max-width: '100%'  //This will make container to take screen width
}

注意：不要将宽度设置为column之类的，

.Column {
    width: 1170px;
}

Answer 2

尝试将“width : 100%”传递给所有需要它的父元素（Container、ContentBoxLarge 和 Row）。然后添加以下css

.row{
   display: flex;
   justify-content: space-between;
}
.col{
   flex: 1 1;
}