Question

所以我一直在练习反应，现在我发现自己正在学习反应 - 引导。当我的设置看起来正确时，我无法让它工作。

我克隆了反应锅炉板

$ create-react-app myapp

然后我安装了bootsrap

$ npm install --save react-bootstrap

然后我添加了<Button>

import React, { Component } from 'react';
import './App.css';
import Button from 'react-bootstrap/lib/Button';

class App extends Component {

  render() {
    return (
      <div className="App">
         <Button>Default</Button>
      </div>
    );
  }
}

export default App;

预期结果：

实际结果：

的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Answer 1

您需要在应用程序中包含引导程序样式。

来自Bootstrap-react site：

因为React-Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不附带任何包含的CSS。但是，某些样式表需要使用这些组件。

他们建议使用cdn加载样式。您可以在index.html文件的头部包含以下内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

或者你可以从https://cdnjs.com/libraries/twitter-bootstrap/3.3.7

获取另一个版本

React-bootstrap正确设置

1 个答案: