为什么我的按钮在 Bootstrap 5 迁移后是全宽的？

Question

我升级了我的依赖项，它导致了以下问题 - 这两个按钮过去是并排放置的，但现在它们堆叠在一起并占据了整个宽度：

import { Button as BootstrapButton, Row, Container, Table } from 'react-bootstrap';

        <Container>
            <Row>
                <Button
                    data-testid="brazejob-start-sync-btn"
                    variant="primary"
                    size="sm"
                    disabled={isJobRunning()}
                    onClick={startSync}
                >
                    <PlayFill />
                    Start New Sync
                </Button>
                <Button
                    data-testid="brazejob-cancel-sync-btn"
                    variant="warning"
                    size="sm"
                    disabled={!isJobRunning()}
                    onClick={cancelSync}
                >
                    <StopFill />
                    Cancel
                </Button>
            </Row>
        <Container>

我想 bootstrap 5 和 react-bootstrap 2 有很多变化所以我可能遗漏了一些非常简单的东西，但我在 react 的文档上找不到任何东西-bootstrap关于

Answer 1

Bootstrap 期望只有列位于行内。 Bootstrap 5 有 CSS 强制行中的所有子项（预期为列）增长到 100% 宽度。因此，由于 .row.

上的 flex-wrap，您的按钮将增长到 100% 宽度并环绕

Bootstrap 4 人没有这个...

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

因此，改为在行内使用 Col，并将按钮放在 Col 中。在 Col 上设置 d-flex，这样按钮将水平放置，因为 flex-direction：row 是 flexbox 默认...

      <Container className="App">
          <Row>
            <Col className="d-flex">
              <Button
                    data-testid="brazejob-start-sync-btn"
                    variant="primary"
                    size="sm"
                >
                    Start New Sync
                </Button>
                <Button
                    data-testid="brazejob-cancel-sync-btn"
                    variant="warning"
                    size="sm"
                >
                    Cancel
                </Button>
            </Col>
          </Row>
      </Container>

https://codeply.com/p/19y5XOgGq1

Answer 2

要详细说明 Zim 的答案，请在每个按钮周围添加一个 Col 组件，或者删除 Row 组件并使用 flex 类。我不会两者都做，因为它有点多余。

查看 grid and flex 文档作为复习。

<Container>
   <Row>
      <Col>
        <Button />
      </Col>

      <Col>
        <Button />
      </Col>
   </Row>
<Container>

<Container>
   <div className="d-flex">
      <Button />
      <Button />
   </div>
<Container>

为什么我的按钮在 Bootstrap 5 迁移后是全宽的？

Why are my buttons full width after a Bootstrap 5 migration?

react-bootstrap

bootstrap-4

bootstrap-5