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

【问题标题】：Why is .card-header not rendering properly in my React Bootstrap setup?为什么 .card-header 在我的 React Bootstrap 设置中无法正确呈现？
【发布时间】：2021-10-07 02:37:35
【问题描述】：

我当前的前端是使用 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 类没有。它应该填充圆角，如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>;

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

【问题讨论】：

你的卡片类似乎有一个填充物。我的建议是检查浏览器中的元素，并查看填充来自哪一行代码。如果它来自默认 Bootstrap，那么您可以添加一些 p-0 类，或者如果它来自其他地方，您可以将它们编辑掉。
谢谢，确实是这样！

标签： reactjs sass react-bootstrap

【解决方案1】：

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

【讨论】：

custom.css 当前完全为空，因此不可能如此。 reset.scss 似乎也不是问题。
请生成一个 jsfiddle 并分享您的代码。

【解决方案2】：

事实证明，来自 React Bootstrap 的 Row 组件将一些 CSS 传递给其子级，其中包含 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);
}

这导致了我在使用卡头时遇到的问题。我通过将 p-0 添加到我的卡片 div 来解决此问题。

编辑：我完全忽略了 React Bootstrap 具有内置 Card 组件的事实......

【讨论】：

您应该接受自己的答案作为解决方案答案，以便其他用户可以轻松看到！
同意了，但是说要等到明天。