React-Bootstrap 行/列不是屏幕的全宽（只有 50%）

Question

自从我开始编写 HTML 以来，我在 CSS 和 Bootstrap 方面的经验，当涉及到在屏幕上定位和调整元素大小时，一直非常糟糕。我想要做的（在我的 React 项目中）是在屏幕上并排放置 2 个元素，左边的元素需要是屏幕宽度的 80%，右边的元素必须是屏幕宽度的 20%屏幕宽度。显然，引导程序能够做到这一点，需要 4 周的时间编写代码、20 多个堆栈溢出问题和 1 个人牺牲。

下面是一个主要的应用程序组件<React.Fragment/>标签和<Container/>使用<Row/>以及<Col/>内部的：

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

class App extends Component {
  state = {};
  render() {
    return (
      <React.Fragment>
        <Container>
          <Row>
            <Col>Hello</Col>
            <Col>Hello2</Col>
          </Row>
        </Container>
      </React.Fragment>
    );
  }
}

export default MainContent;

预期结果？Hello将在屏幕的左侧，Hello2将在屏幕中间的右侧。正如这里的文档所建议的那样。

但当然这不会发生。该行在屏幕中间居中，总宽度约为屏幕尺寸的一半。

为了显示： 25% Whitespace | Hello1 | Hello2 | 25% Whitespace

老实说，我不知道该怎么做。将边距设置为 0 会将它放在屏幕的左侧，但它仍然不是全宽。

有人请帮助我，我受够了:(

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
}

或者，另一种方法是，您可以将fluidprop添加到Container,

流体- 允许容器填充所有可用的水平空间。

<Container fluid>
  ...
</Container>

注意：这里Col将默认采用equal space.

Col 允许您指定 5 种断点大小（xs、sm、md、大和 xl）的列宽。

例如，

<Row>
    <Col xs={6} md={8}>
      xs=6 (6 parts of screen on small screen) md=8 (8 parts of screen on medium screen)
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
</Row>