React-Bootstrap的行/列没有占满整个屏幕宽度（只有50%）。

Question

React-Bootstrap的行/列没有占满整个屏幕宽度（只有50%）。

21

自从我开始写HTML以来，我对CSS和Bootstrap在屏幕上定位和调整元素方面的经验一直非常可怕。在我的React项目中，我只是尝试将2个元素并排放置在屏幕上，左侧元素需要占据屏幕宽度的80％，右侧元素需要占据屏幕宽度的20％。很明显，为了能够做到这一点，Bootstrap需要写4周的代码，提问20多个问题并且还要祭人。

下面是主应用组件，其中包含标签和一个，里面有和。

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% 空白 | Hello1 | Hello2 | 25% 空白

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

有人请帮帮我，我已经快崩溃了:(

- Liam G

6个回答

4

我曾经遇到过同样的问题，我的根组件没有完全填满宽度。将宽度设置为100%可以解决此问题。

#root {
    width: 100%;
}

- Daruda

2

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

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

- user1767599

1

我不太了解这项技术……但应该可以工作。

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

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

- JorgeeFG

0

这样就可以了

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

- AdamVanBuskirk

0

在行内样式中添加 (padding: '0')。这样应该就解决了。

- mozart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ravibagul91 · Accepted Answer

在 Bootstrap 中，默认情况下，container 的 width 和 max-width 被设置为一些像素值。

Translated text:

默认情况下，在 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 - 允许容器填充所有可用的水平空间。

<Container fluid>
  ...
</Container>

注意：这里 Col 默认采用 等分宽度。

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>