2017-05-02 6 views
2

私は反応を実践してきましたが、今は自分自身が反応ブートストラップを学んでいます。私のセットアップが正しいように見えるときは、それを動作させることができません。私はその後、私はbootsrapリアブートストラップ正しい設定

$ npm install --save react-bootstrap 

をインストール

$ create-react-app myapp 

反応ボイラープレートをクローニングし

そしてIは<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; 
を加え

期待される成果:

enter image description here

実際の結果:

enter image description here

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> 
+0

から別のバージョンをつかむことができました。 – Shota

+0

@Shotaは私の例でそれをインポートしませんでしたか? –

答えて

1

アプリケーションにブートストラップスタイルを含める必要があります。 Bootstrap-react siteから

リアクト - ブートストラップは、ブートストラップの非常に正確なバージョンに依存しないので、私たちはどんな含まCSSは付属していません。ただし、これらのコンポーネントを使用するにはスタイルシートが必要です。

これらは、スタイルをロードするためにCDNを使用することをお勧めします。あなたのindex.htmlファイルの先頭に次のように含めることができます

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

それとも、あなたが手動でインポートして、プロジェクト内のブートストラップCSSをインポートする必要がhttps://cdnjs.com/libraries/twitter-bootstrap/3.3.7

+1

の例を挙げておけば助けとなるでしょう。あなた自身でCSSを提供したい場合は、あなたのindex.jsに 'import 'bootstrap/dist/css/bootstrap.min.css';'を追加してください。 –

関連する問題