Почему моя панель навигации из React-Bootstrap отображается вертикально, а не так, как показано в документации?

avatar
Jared Ross
8 апреля 2018 в 02:06
661
1
1

Я попытался импортировать свой класс панели навигации из бутстрапа в свое новое приложение для реагирования, но он не отображается должным образом. Вместо рендеринга в той же строке он отображается следующим образом

Вот мой код:

import React, { Component } from 'react';
import { Navbar, Nav, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class SplashNav extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#home">React-Bootstrap</a>
          </Navbar.Brand>
        </Navbar.Header>
        <Nav>
          <NavItem eventKey={1} href="#">
            Link
         </NavItem>
          <NavItem eventKey={2} href="#">
            Link
    </NavItem>
          <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
            <MenuItem eventKey={3.1}>Action</MenuItem>
            <MenuItem eventKey={3.2}>Another action</MenuItem>
            <MenuItem eventKey={3.3}>Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey={3.4}>Separated link</MenuItem>
          </NavDropdown>
        </Nav>
      </Navbar>
    )
  }
}

и

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Jumbotron, Grid, Row, Col, Image, Button } from 'react-bootstrap';
import './SplashScreen.css';
import SplashNav from './SplashNav.js';

export default class SplashScreen extends Component {
  render() {
    return (
      <div>
        <SplashNav />
        <Grid>
          <Jumbotron>
            <h2>Welcome to Vocafy</h2>
            <p>This is how to communicate with your people</p>
          </Jumbotron>
          <Link to="/login">
            <Button bsStyle="primary">Login</Button>  
          </Link>  
        </Grid>
      </div> 
    )
  }
}

Я прочитал документацию по Bootstrap и у меня должны быть все необходимые CDN и т. д. Заранее спасибо за помощь.

Источник

Ответы (1)

avatar
Lucas Kellner
8 апреля 2018 в 03:25
1

enter image description hereПанель навигации выглядит нормально, когда я запускаю ваш код. Дважды проверьте правильность ссылки на bootstrap .css в общедоступном index.html. При тестировании вашего кода я использовал:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Если это не ваша проблема, попробуйте визуализировать компонент без импорта SplashScreen.css. Возможно, у вас есть какие-то стили, которые переопределяют бутстрап.

Jared Ross
8 апреля 2018 в 15:36
0

Только что проверил, и кажется, что я использовал ссылку Bootstrap 4. Это, а также удаление и переустановка react-bootstrap, похоже, помогли. Спасибо!