我在我的项目中导入 Bootstrap 但它不起作用

Question

我想在滑块中显示卡片。当点击下一个轮播时，它会显示下一张卡片。

我正在将 Bootstrap 导入到我的项目中，但它不起作用。

导入'../node_modules/bootstrap/dist/css/bootstrap.min.css';

我正在使用这个tutorial 来创建卡片和滑块。

您可以查看完整代码here

Sdata.jsx

const Sdata =[
    {
        imgsrc: work2,
        title: "Android Application",
        href: "https://mybestdjangoblog.herokuapp.com/",
    },
    {
        imgsrc: work3,
        title: "Android Application",
        href: "https://mybestdjangoblog.herokuapp.com/",
    }
   
];

Card.jsx

function Card(props){
    return(
        <>
            <img className="card-img-top"
                src={props.imgsrc} alt="" />
            <div className="card-body">
                <h4 className="card-title">{props.title}</h4>
                <p className="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a href={props.href} className="btn btn-primary" target="_blank">View Project</a>
            </div>
        </>
    );
};

Work.jsx

const Work =() =>{
    return(
      <>
        <div id="multi-item-example" className="carousel slide carousel-multi-item" data-ride="carousel">
          <div className="controls-top">
            <a className="btn-floating" href="#multi-item-example" data-slide="prev"><i className="fas fa-chevron-left"></i></a>
            <a className="btn-floating" href="#multi-item-example" data-slide="next"><i
                className="fas fa-chevron-right"></i></a>
          </div>

          <ol className="carousel-indicators">
            <li data-target="#multi-item-example" data-slide-to="0" className="active"></li>
            <li data-target="#multi-item-example" data-slide-to="1"></li>
          </ol>
          
          <div className="carousel-inner" role="listbox">
            <div className="carousel-item active">
              <div className="col-md-3" style={{ float: "left"}}>
                <div className="card mb-2">
                  <img className="card-img-top"
                  src={work1} alt="" />
                  <div className="card-body">
                  <h4 className="card-title">Android Application</h4>
                  <p className="card-text">Some quick example text to build on the card title and make up the bulk of the
                      card's content.</p>
                  <a href="https://mybestdjangoblog.herokuapp.com/" className="btn btn-primary" target="_blank">View Project</a>
                </div>
                <div className="carousel-item">
                  <div className="col-md-3" style={{float:"left"}}>
                    <div className="card mb-2">
                      {Sdata.map((val, ind) => {
                          return(
                            <Card key={ind} imgsrc={val.imgsrc} title={val.title} href={val.href}/>
                          )})}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>        
      </div>         
      </>

Answer 1

npm install

将安装 package.json 中列为依赖项的所有模块。

Answer 2

您应该将bootstrap 安装为：

1. npm i react-bootstrap
2. npm i bootstrap

然后导入样式为：

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