无法在反应 js 中显示引导面板答案

【问题标题】：Unable to display bootstrap panels in react js无法在反应 js 中显示引导面板
【发布时间】：2020-08-28 06:00:42
【问题描述】：

我正在尝试从这里显示这些引导面板 https://www.w3schools.com/bootstrap/bootstrap_panels.asp： 页眉和页脚。

我已经在我的项目中安装了引导程序。我可以看到 Button 工作正常，但 panels 没有出现。

App.js：

import React from "react";
import { Button } from "react-bootstrap";
import { Container, Row, Col } from "react-bootstrap";

import "./App.css";

function App() {
  return (
    <div>
      <center>
        <Button href="#">Link</Button>
      </center>
      <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">Panel Content</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  );
}

export default App;

这是输出，但它没有正确显示面板：

【问题讨论】：

我想，您错过了在应用程序中导入引导程序的 css。
我认为您使用的是引导程序版本 4，如果是这样，您需要使用 card 而不是面板和工作示例 codesandbox.io/s/react-bootstrap-tqdxf
stackoverflow.com/a/44985246/13146189 我从这个答案中完成了所有步骤，我知道为什么它还没有来
@ManirajMurugan 是的，让我尝试使用卡片
@ManirajMurugan 我不知道你是如何得到输出的，我不是

标签： reactjs bootstrap-4 react-bootstrap

【解决方案1】：

Step.1：install bootstrap

npm install bootstrap

第二步：include bootstarp CSS

import "bootstrap/dist/css/bootstrap.min.css";

另外，请注意，在您的代码中，您使用的是class 而不是className。不过，it might work but with warnings。看看怎么办styling in reactjs。

示例：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div className="card">
      <div className="card-header">Card Header</div>
      <div className="card-body">Card Body</div>
      <div className="card-footer text-muted">Card Footer</div>
    </div>
  );
}

这是sandbox

【讨论】：

我只需要引导样式