为什么 Bootstrap 5 迁移后我的按钮变成全宽？

Question

我升级了我的依赖项，这给我带来了以下问题 - 这两个按钮过去彼此相邻放置，但现在它们堆叠在彼此之上并占据完整宽度：

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

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

我想 Bootstrap 5 和 React-Bootstrap 2 有很多变化，所以我可能会错过一些非常简单的东西，但我在 React-Bootstrap 的文档中找不到任何相关内容

Answer 1

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

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 是 Fl​​exbox 默认值...

      <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