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

Posted 2023-02-22

【中文标题】无法在反应 js 中显示引导面板

【英文标题】：Unable to display bootstrap panels in react 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

***.com/a/44985246/13146189 我从这个答案中完成了所有步骤，我知道为什么它还没有来

@ManirajMurugan 是的，让我尝试使用卡片

@ManirajMurugan 我不知道你是如何得到输出的，我不是

【参考方案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

【讨论】：

我只需要引导样式