React-bootstrap NavBar 没有得到正确的样式答案

【问题标题】：React-bootstrap NavBar not getting correct stylesReact-bootstrap NavBar 没有得到正确的样式
【发布时间】：2018-09-29 20:41:04
【问题描述】：

我刚刚开始学习 react-bootstrap，但在让 NavBar 组件正确呈现时遇到了问题。首先，我复制了https://react-bootstrap.github.io/components/navbar/ 上的基本导航栏的代码，但我得到的只是以下内容。

如此处所示： navbar-component

据我所知，我已经准备好了所有内容，包括 index.html 头部的 css 以及将 webpack 与 css-loader 一起使用。显然我遗漏了一些东西，需要一些帮助！

导航.js

import React from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react- 
bootstrap';

    const Navigation = () => ( 
    <div>
    <Navbar>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#home">React-Bootstrap</a>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav>
        <NavItem eventKey={1} href="#">
          Link
        </NavItem>
        <NavItem eventKey={2} href="#">
          Link
        </NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.4}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar>
  </div>
);

export default Navigation;

webpack.config.js

const path = require('path');

console.log(path.join(__dirname, 'public'));

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
};

index.html 中的链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

我的应用程序不是使用 create-react-app 构建的，而是从我一直在学习的 udemy 课程从头开始，所以也许有一些我不知道的东西搞砸了？

感谢任何帮助！

【问题讨论】：

您遇到了什么具体问题？

标签： reactjs bootstrap-4 react-bootstrap

【解决方案1】：

我相信 react-bootstrap 目前仅适用于 v3 .. 请改用此链接 ..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

如果您想要 Bootstrap 4，请尝试使用 reactstrap

【讨论】：

谢谢！我没有意识到 reactstrap 与 react-bootstrap 不同。我现在肯定会研究这个:)

【解决方案2】：

react-bootstrap 旨在与 Bootstrap 3 一起使用。

在introduction section中有一个警告：

React-Bootstrap 目前针对 Bootstrap v3。使用 React-Bootstrap，包含 Bootstrap v3 的 CSS 而不是 Bootstrap v4.

【讨论】：

哇，这么简单的修复.. 我想我错过了文档中的那条信息：S