反応起動ストラップnavbarが正しくレンダリングされない

私はちょうどこの2週間前にReactを学び始めました。私は最初の本当の問題に遭遇しました。私が反応し、ブートストラップを使用してナビゲーションバーを作成しようとしているが、私はそれをレンダリングするとき、私はこれを取得：反応起動ストラップnavbarが正しくレンダリングされない

http://i185.photobucket.com/albums/x65/KaristonTheWolf/Faulty%20Navbar.png

これは私が使用しているコードです：

import React from 'react'; 
import { Navbar, Nav, NavItem } from 'react-bootstrap/lib/'; 

const Toolbar =() => { 
    return (
    <Navbar staticTop collapseOnSelect> 
     <Navbar.Header> 
     <Navbar.Brand> 
      <a href="test">Brandname Goes Here</a> 
     </Navbar.Brand> 
     <Navbar.Toggle /> 
     </Navbar.Header> 
     <Navbar.Collapse> 
     <Nav> 
      <NavItem eventKey={1}>Contact Us</NavItem> 
      <NavItem eventKey={2}>About Us</NavItem> 
     </Nav> 
     </Navbar.Collapse> 
    </Navbar> 
) 
} 

export default Toolbar;

アイムエラーメッセージが表示されず、私が得たものと矛盾する文書は見つかりませんでしたが、明らかに何か間違っています。何か案は？

出典

2017-11-16 Karis

プロジェクトでbootstrap.cssをインポートしていないようです。 –

npmを使用して 'react-bootstrap'をインストールしましたか？ –

はい、反応ブートストラップをnpm経由でインストールしました – Karis

react-bootsrap getting started tab

に移動して、あなたのindex.html<head>タグに説明の下のリンクをコピーして、あなたがnpmを使用してreact-bootstrapをインストールした場合、その後、あなたはそうのようなナビゲーションバーをインポートすることができます。 import { Navbar, Nav, NavItem } from 'react-bootstrap';

出典

2017-11-16 06:43:04

ありがとう、それは私が必要としていたものです – Karis

ことがありますブートストラップのCSSファイルをインポートしていないことを確認してください。あなたのindex.htmlでそれをインポートすることは十分に公平でなければなりません：

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

私は私はあなたが使用しているフレームワークを確認していないので（WebPACKのを...）import 'react-bootstrap/*/*.css'のようなものを使用することをお勧めします、あなたが持っているローダーたことができません。

出典

2017-11-16 06:45:54

反応起動ストラップnavbarが正しくレンダリングされない

答えて

関連する問題