javascript - 使用示例代码，整个 Reactstrap 导航栏未对齐/反转

Question

在尝试为我的站点设置导航栏组件时，我第一次关注 reactstrap 示例，它看起来与显示的输出完全不同。这是它的样子：

我期待它看起来像（样机）：

我在这里到底做错了什么？

这是我的代码：

import React from 'react';
import { Container, Row, Col, Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default class NavigationBar extends React.Component {
constructor(props) {
  super(props);
  this.toggle = this.toggle.bind(this);
  this.state = {
    isOpen: false
  };
}

toggle() {
  this.setState({
    isOpen: !this.state.isOpen
  });
}

render() {
  return (
    <div className="app">
      <Container fluid={true}>
        <header>
          <Row>
            <Col sm="12" md="12" lg="12">
              <Navbar className="navbar-inverse" toggleable>
                <NavbarToggler right onClick={this.toggle} />
                <NavbarBrand href="/">
                  My App
                </NavbarBrand>
                <Collapse isOpen={this.state.isOpen} navbar>
                  <Nav navbar>
                    <NavItem>
                      <NavLink href="/settings/">Settings</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink href="/logout/">Logout</NavLink>
                    </NavItem>
                  </Nav>
                </Collapse>
              </Navbar>
            </Col>
          </Row>
        </header>
      </Container>
        </div>
    );
}
}

和：

html, body {
  height: 100%;
  width: 100%;
}

body {
  padding-top: 0.5rem;
}