React-bootstrap 导航栏不向左对齐答案

【问题标题】：React-bootstrap navbar is not flush leftReact-bootstrap 导航栏不向左对齐
【发布时间】：2018-06-15 02:03:28
【问题描述】：

我无法让基本的 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">

【问题讨论】：

标签： twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

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

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

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

看看codesandbox exp.

【讨论】：

感谢您的回复！一些后续问题：这删除了左侧填充，但右侧拉出的容器仍然没有在右侧齐平。另外，我怎么知道相关的类是 .navbar > .container？为什么我的内联方法不起作用？
右拉按预期工作，因为导航类有一个填充，我会将修复添加到响应中，但通常当您使用 devtools 检查元素时，您可以检查 html和计算的样式（因此您可以直接在浏览器中应用更改进行调试，然后使用实际代码中的更改）。

【解决方案2】：

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

【讨论】：