React-bootstrap导航栏未向左刷新

Question

我无法获得基本的React-bootstrap导航栏以使品牌向左冲洗（或向右冲洗右侧项目）：

我试过抛出一堆marginLeft：0和paddingLeft：0代码，但无济于事。

import {Navbar, Nav, NavItem, NavDropdown, MenuItem} from "react-bootstrap"

render() {
  return (
    <Navbar style={{marginLeft: "0", paddingLeft: "0"}}>
      <Navbar.Header style={{marginLeft: "0", paddingLeft: "0"}}>
        <Navbar.Brand style={{marginLeft: "0", paddingLeft: "0"}}>
          <a href="#home">Not all the way left</a>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">
          Not all the way right
        </NavItem>
      </Nav>
    </Navbar>
  );
}

这是我正在使用的Bootstrap样式表：

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

Answer 1

NavBar在具有最大宽度，边距和填充的容器类中呈现，解决方案是使用CSS重置它们：

.navbar > .container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.navbar {
  margin: 0;
  padding: 0;
}

看一下codesandbox exp。

Answer 2

width和justify-content-end救了我。我已经发布了代码here。