1

I can't get the basic React-bootstrap navbar to have the brand flush left (or the pull-right items flush right):

enter image description here

I tried throwing in a bunch of marginLeft: 0 and paddingLeft: 0 code, to no avail.

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>
  );
}

This is the Bootstrap stylesheet I am using:

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

2 Answers2

3

the NavBar is rendered inside a container class wich has a max width, margin and padding, a solution is resetiing them using CSS:

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

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

take a look at that codesandbox exp.

Lafi
  • 1,310
  • 1
  • 15
  • 14
  • Thanks for the reply! A few follow-up questions: this removes the left padding, but the right-pulled container is still not flush on the right side. Also, how could I have figured out that the relevant class was .navbar > .container? And why doesn't my inline approach work? – rampatowl Jun 15 '18 at 03:59
  • the right-pulled is working as expected exept for the nav class is having a padding, i will add the fix to the response, but generally when you inspect the elements using the devtools you could inspect the html and the comuted styles(so you could apply changes directly in the browser for debugging then use the changes in the actual code). – Lafi Jun 15 '18 at 04:15
0

width and justify-content-end saved me. I've posted the code here.

Vladimir Vlasov
  • 1,860
  • 3
  • 25
  • 38