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

【问题标题】：Why are my buttons full width after a Bootstrap 5 migration?为什么我的按钮在 Bootstrap 5 迁移后是全宽的？
【发布时间】：2022-12-19 23:18:20
【问题描述】：

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

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

【问题讨论】：

标签： bootstrap-4

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：