问React-Bootstrap和/或带Webpack的Bootstrap
EN

Stack Overflow用户

提问于 2016-01-26 14:21:30

回答 1查看 565关注 0票数 4

我很难理解如何将bootstrap与React和Webpack构建一起使用。我想使用bootstrap的网格布局和各种功能(似乎react-bootstrap提供了bootstrap的所有功能？)想知道设置这个的最好方法是什么。

例如，我使用正常引导方法和react- bootstrap的组件尝试了以下方法，但它们似乎不起作用。另外，您建议如何使用css重置来标准化所有内容？首先，谢谢你的帮助。

  import React from 'react';
  import mui from 'material-ui';
  import style from './style.scss';
  import Navigation from './Navigation';
  import { Grid, Row, Col } from 'react-bootstrap';

  class App extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        /* normal bootstrap -- doesn't work */
        <div className="container">

          /* react-bootstrap which also doesn't work */
          <Grid>
            <Row className="show-grid">
              <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
              <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
            </Row>
          </Grid>

          <Navigation />
        </div>
      );
    }
  }

  export default App;

react-bootstrap

webpack

回答 1

Stack Overflow用户

发布于 2017-02-21 05:49:44

这就是我目前在启动时导入react-bootstrap css的方法。

在app.js (调用ReactDOM.render的地方)中：

// Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
import 'sanitize.css/lib/sanitize.css';
import '!!style-loader!css-loader!./vendor/bootstrap/css/bootstrap.min.css';

sanitize做了normaliser做的事情，但显然更好。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35008045

复制

相似问题

问React-Bootstrap和/或带Webpack的Bootstrap
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React-Bootstrap和/或带Webpack的BootstrapEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React-Bootstrap和/或带Webpack的Bootstrap
EN