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

Question

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

以下是带有-33AB8794B387D79AEBCF67A2222223BC834的主要应用程序组件 <React.Fragment/> tag和 <Col/> <Container/> <Row/>

 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 会将它放在屏幕的左侧，但它仍然不是全宽。

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

原文由 Liam G 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

By default in bootstrap , container width and max-width is set to some px like,

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

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

 <Container fluid>
  ...
</Container>

注意： 此处 Col 默认采用 equal space 。

Col 允许您指定 5 种断点大小（xs、sm、md、large 和 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>

原文由 ravibagul91 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有同样的问题，我的根组件不是 100% 宽。将宽度设置为 100% 解决了这个问题。

 #root {
    width: 100%;
}

原文由 Daruda 发布，翻译遵循 CC BY-SA 4.0 许可协议