Question

这是我第一次将bootstrap与react一起使用，并且未将尺寸应用于我的Navbar和Navbar Icon，我安装了依赖项并使用className代替了class，但仍然没有影响。

import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import 'bootstrap/dist/css/bootstrap.min.css';


export default class Navbar extends Component {
    render() {
      return (
        <nav className="navbar navbar-expand-sm  bg-primary navbar-dark px-sm-5">
          {/* 
  https://www.iconfinder.com/icons/1243689/call_phone_icon
  Creative Commons (Attribution 3.0 Unported);
  https://www.iconfinder.com/Makoto_msk */}
          <Link to="/">
            <img 
            src={logo} 
            alt="store" 
            className="navbar-brand"/>
          </Link>

          <ul className=" navbar-nav align-items-center">
            <li className="nav-item ml-5">
            <Link to="/" className="nav-link">
            Products
            </Link>
            </li> 
          </ul>
        </nav>
      );
    }
  }

要创建的导航栏，而不是巨大的徽标和巨大的栏。

Answer 1

确定要在文档中添加bootstrap.css吗？这是您的相同代码https://codesandbox.io/s/0c9iz

的有效示例

我的组件无法应用引导程序NavBar和NavIcon类

1 个答案: