本文介绍了无法在使用 React-bootstrap 库时应用任何 Bootstrap 样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在我的 React 应用程序中使用默认的 Bootstrap 组件,所以我使用的是 React-bootstrap NPM 包.但我一开始就卡住了:我不能使用任何 默认组件 虽然我是只是从官方文档中复制非常简单的例子.每次我使用 Bootstrap 样式的组件时,我都会得到没有样式的基本组件.例如,下面的代码呈现一个没有样式的 ,而不是来自 Bootstrap 的 .

I want to use default Bootstrap components in my React application, so I'm using React-bootstrap NPM-package. But I stuck at the very beginning: I cannot use any default component although I'm just copying very simple exmaples from official docs. Every time I use Bootstrap-styled component, I get basic component withouts styles. For example the code below renders a <button> without styles, not <Button bsStyle="danger"> from Bootstrap.

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:在打包过程中忽略了一些样式?

Why do I have such a problem? Maybe it's about Babel or Webpack: some styles are being ignored during the packaging?

推荐答案

当您想使用 react-bootstrap 组件时,您需要在代码中使用 bootstrap-css 以合并样式.

When you want to use react-bootstrap component you need use the bootstrap-css in your code in order to encorporate the styles.

您可以通过在 index.html 中添加以下内容来实现

You can do this by adding the follwowing in your index.html

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

来自 react-bootstrap 文档

From the react-bootstrap docs

因为 React-Bootstrap 不依赖于一个非常精确的版本Bootstrap,我们不附带任何包含的 css.然而,一些使用这些组件需要样式表.如何以及哪个您包含的引导程序样式取决于您,但最简单的方法是包括来自 CDN 的最新样式.

文档

这篇关于无法在使用 React-bootstrap 库时应用任何 Bootstrap 样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-27 20:37
查看更多