Question

我尝试将我的导航栏类从bootstrap导入到我的新反应应用程序中，但它没有按预期呈现。 Instead of rendering in the same row, it renders like this

这是我的代码：

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等。提前感谢您的帮助。

Answer 1

运行代码时，导航栏显示正常。仔细检查您是否在公共index.html中正确链接到bootstrap .css。在测试我使用的代码时：

<!-- 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。也许你有一些覆盖引导程序的样式。

为什么我的导航栏从React-Bootstrap垂直渲染而不是文档中显示的方式？

1 个答案: