为什么 .card-header 在我的 React Bootstrap 设置中无法正确呈现？

Question

我目前的前端是用 React、TypeScript、Webpack、Sass 和 React Bootstrap 设置的。我按照 React Bootstrap documentation 并安装了依赖项。

"bootstrap": "^5.0.2",
"react-bootstrap": "^2.0.0-beta.4",

然后我添加了一个导入来包含样式表，就像这样（Sass）：

// CSS reset
@import '@scss/reset.scss';
// Override the bootstrap SCSS (completely empty for now)
@import '@scss/custom.scss';
@import "~bootstrap/scss/bootstrap";

然后我将 .scss 文件导入到我的 App.tsx 文件中：

import './App.scss';

一切似乎都工作正常，除了 .card-header class 没有。它应该填满圆角，如 Bootstrap example.

中所示

负责上图的代码是从Bootstrap示例中复制的。

<div className="card">
    <div className="card-header">Featured</div>
    <div className="card-body">
        <h5 className="card-title">Special title treatment</h5>
        <p className="card-text">
            With supporting text below as a natural lead-in to additional content.
        </p>
        <a href="#" className="btn btn-primary">
            Go somewhere
        </a>
    </div>
</div>;

我很可能忘记了安装过程中的某些步骤，但我不知道是什么。

Answer 1

很难说没有看到你的整个代码，但看起来像其他一些 css，也许来自 custom.css 的东西干扰了 bootstrap 样式。

Answer 2

事实证明，来自 React Bootstrap 的 Row 组件将一些 CSS 传递给它的 children，其中包含 padding-left 和 padding-right 语句。

.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);
}

这导致了我遇到的卡问题 header。我通过将 p-0 添加到我的卡 div.

来解决这个问题

编辑：我完全忽略了 React Bootstrap 有一个 built-in Card 组件的事实...

为什么 .card-header 在我的 React Bootstrap 设置中无法正确呈现？

Why is .card-header not rendering properly in my React Bootstrap setup?

sass

reactjs

react-bootstrap