React-Bootstrap Navbar не отображает стили - PullRequest
0 голосов
/ 19 марта 2019

Итак, я пытаюсь использовать реакцию-бутстрап, например:

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from "react-router-dom";
import {Navbar, Nav} from "react-bootstrap";
import {LinkContainer} from "react-router-bootstrap";
import {HomeComponent} from "../home/HomeComponent";
import {ContactComponent} from "../contact/ContactComponent";
import {AboutComponent} from "../about/AboutComponent";

render() {
    return (
        <BrowserRouter>
            <Navbar bg="light" expand="lg">
                <Link to={'/'}>Home</Link>
                <Link to={'/about'}>About us</Link>
                <Link to={'/contact'}>Contact us</Link>
            </Navbar>
            <Switch>
                <Route exact={true} path={'/about'} component={AboutComponent}/>
                <Route exact={true} path={'/contact'} component={ContactComponent}/>
                <Route exact={true} path={'/'} component={HomeComponent}/>
            </Switch>
        </BrowserRouter>
    );
}

Согласно документации, это должно выглядеть так:

enter image description here

Но это выглядит так:

* +1012 *enter image description here

Похоже, что он не использует никаких стилей. Почему это?

1 Ответ

1 голос
/ 19 марта 2019

Вам необходимо включить таблицы стилей. Как указано в начальной реакции на получение начальной документации:

Поскольку React-Bootstrap не зависит от очень точной версии Bootstrap, мы не поставляем с любым включенным CSS. Однако для использования этих компонентов требуется некоторая таблица стилей. Как и какие стили начальной загрузки вы включаете, зависит от вас, но самый простой способ - включить последние стили из CDN.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

Вы должны попробовать добавить этот фрагмент кода в <head></head> вашего html-файла, и все будет хорошо.

подробнее

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...