Question

我想在ReactJS中使用Bootstrap将导航栏添加到我的网站。但是所有的NavItem都在不同的行上。如何将它们放在一条线上。我按照Bootstrap文档中的指南进行了操作。

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

class Header extends Component {
render() {
return(
  <div className="Header">
    <Navbar inverse collapseOnSelect>
      <Navbar.Header>
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav pullLeft>
          <NavItem eventKey={1} href="#">
            Link1
          </NavItem>
          <NavItem eventKey={2} href="#">
            Link2
          </NavItem>
        </Nav>
        <Nav pullRight>
          <NavItem eventKey={1} href="#">
            Link3
          </NavItem>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  </div>
)
}
}

export default Header;

Answer 1

您需要从您的包或CDN中将de css添加到index.html。

检查此Link for more info

Answer 2

[工作演示在这里] codesendbox

ReactJS Bootstrap Navbar不在一行中

2 个答案: