반작용 부트 스트랩 navbar가 올바르게 렌더링되지 않습니다.

지난 몇 주 동안 React를 배우기 시작했는데, 처음으로 진짜 문제가 생겼습니다. 나는 반응 - 부트 스트랩을 사용하여 메뉴 바를 만들기 위해 노력하고있어,하지만 난 그것을 렌더링 할 때 나는이 얻을 : 난반작용 부트 스트랩 navbar가 올바르게 렌더링되지 않습니다.

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;

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

이 내가 사용하는 코드입니다 어떤 오류 메시지도받지 못하고 내가 가진 것을 모순되는 문서를 찾을 수 없지만 분명히 잘못된 것을하고 있습니다. 어떤 아이디어?

출처

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">

내가 사용 (웹팩 ..) 어느 당신이 로우더되는 프레임 워크 확실하지이기 때문에 import 'react-bootstrap/*/*.css' 같은 것을 사용하는 것이 좋습니다 수 없습니다.

출처

2017-11-16 06:45:54

반작용 부트 스트랩 navbar가 올바르게 렌더링되지 않습니다.

답변

관련 문제