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

【问题标题】：React-Bootstrap Rows/Columns are not the full width of the screen (Only 50% of it)React-Bootstrap 行/列不是屏幕的全宽（只有 50%）
【发布时间】：2019-12-26 05:46:52
【问题描述】：

自从我开始编写 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 会将其放在屏幕左侧，但仍不是全宽。

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

【问题讨论】：

标签： html css reactjs react-bootstrap

【解决方案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%like，

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

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

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>

【讨论】：

屏幕的6个部分是否意味着屏幕的6 / N，如果是，N是多少？
@Pixel 网格分为 12 个部分。所以 N = 12。
谢谢 - 总是这样吗？我们不能以某种方式改变 N 吗？
总是 12 - 它背后有科学依据。

【解决方案2】：

我对这项技术了解不多……但这应该可以。

  <React.Fragment>
    <Container>
      <Row>
        <Col md={{ span: 3 }}>Hello</Col>
        <Col md={{ span: 3 }}>Hello2</Col>
      </Row>
    </Container>
  </React.Fragment>

编辑：我可能读错了你的问题。你指的是屏幕宽度吗？还是“容器”的 div 宽度？

【讨论】：

【解决方案3】：

我遇到了同样的问题，我的根组件不是 100% 宽。将宽度设置为 100% 可以解决问题。

#root {
    width: 100%;
}

【讨论】：

【解决方案4】：

任何地方的宽度都可以用单引号或双引号给出，使用样式的宽度部分如下所示：

    style={{
      width: "80%",
      paddingLeft: 100,
      paddingRight: 200,
      paddingTop: 30,
      paddingBottom: 30,
      border: "3px solid lightGray",
    }}

【讨论】：

【解决方案5】：

放置一个内联样式（填充：'0'）。那应该可以解决它。

【讨论】：

【解决方案6】：

这样就可以了

<div class="container">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-3 text-center">Hello</div>
    <div class="col-3 text-center">Hello 2</div>
    <div class="col-3"></div>
  </div>
</div>

【讨论】：