html - React-Bootstrap 行/列不是屏幕的全宽(只有 50%)

Question

自从我开始编写 HTML 以来，我使用 CSS 和 Bootstrap 的经验，在屏幕上定位和调整元素大小时，一直非常糟糕。我想要做的(在我的 React 元素中)是并排在屏幕上放置 2 个元素，左边的元素需要是屏幕宽度的 80%，右边的元素必须是屏幕宽度的 20%屏幕宽度。显然，要让 bootstrap 能够做到这一点，它需要 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将在屏幕右侧中间的砰砰声中。正如文档所建议的那样 here .

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

举例说明: 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
}

或者，另一种方法是，您可以将 fluid 属性添加到 Container，

fluid - Allow the Container to fill all of it's availble horizontal space.

<Container fluid>
  ...
</Container>

注意:此处Col默认采用等间距。

The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, large, and 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>