react-bootstrap 导入不正确

Question

我正在尝试将一个简单的 react-bootstrap 示例放在一起以查看它的运行情况，但我无法正确呈现任何组件。例如，

这是一个简单的组件：

import React from 'react';
import {ButtonToolbar, DropdownButton, MenuItem} from 'react-bootstrap';

export default React.createClass({
  render: function() {
    return <div>

      <ButtonToolbar>
        <DropdownButton bsSize="large" title="Large button" id="dropdown-size-large">
          <MenuItem eventKey="1">Action</MenuItem>
          <MenuItem eventKey="2">Another action</MenuItem>
          <MenuItem eventKey="3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="4">Separated link</MenuItem>
        </DropdownButton>
      </ButtonToolbar>
    </div>
  }
});

这是我在脚本中加载的 index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"></link>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"></link>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

我已经确认导入了 ButtonToolbar、DropdownButton 和 MenuItem，并且脚本加载正常，但组件只是 html，而不是 bootstrap 样式。我错过了什么？

Answer 1

您需要明确 add the bootstrap CSS 您的项目。 CSS 样式不包含在 React bootstrap 组件中。

检查 Bootstrap 以了解有关如何将其包含在您的项目中的选项。

一个选项是安装 bootstrap 包

npm install --save bootstrap

和 link 到 HTML 文件中的样式表：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

react-bootstrap 导入不正确

react-bootstrap not importing properly

javascript

twitter-bootstrap

reactjs

react-bootstrap