在使用 React-bootstrap 库时无法应用任何 Bootstrap 样式

Question

我想在我的 React 应用程序中使用默认 Bootstrap 组件，所以我正在使用 React-bootstrap NPM 包。但我一开始就卡住了：我不能使用任何 default component 尽管我只是从官方文档中复制非常简单的例子。每次我使用 Bootstrap 样式的组件时，我都会得到没有样式的基本组件。例如，下面的代码呈现没有样式的 <button>，而不是 Bootstrap.

中的 <Button bsStyle="danger">

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import store from "./store";
import {Button} from 'react-bootstrap';

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Button bsStyle="danger">Danger</Button>
            </Provider>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('app-container'));

为什么我会出现这样的问题？可能是 Babel 或 Webpack 的问题：有些样式在打包时被忽略了？

Answer 1

当你想使用 react-bootstrap 组件时，你需要在你的代码中使用 bootstrap-css 来合并样式。

您可以通过在 index.html

中添加以下内容来完成此操作

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

来自 react-bootstrap 文档

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

DOCS

在使用 React-bootstrap 库时无法应用任何 Bootstrap 样式

Cannot apply any Bootstrap style in using React-bootstrap library

javascript

css

reactjs

twitter-bootstrap-3

react-bootstrap