Bootstrap: Navbar containers lose padding too soon

[jonsa]

When the navbar turns toggleable the brand is 15px left of the content.

See http://jsfiddle.net/2t6e0ryh/

[pvdlg]

I think it's a duplicate of #21659. Which is fixed by #21729.

[jonsa]

I don't think so. If I introduce that change, see http://jsfiddle.net/2t6e0ryh/1/, it made it even worse in that the toggler is stuck at the far right.

[pvdlg]

Oh right! I misread and thought you were talking about the toggle button, but it was the brand.
This is due to these lines _navbar.scss#L134. It explicitly reset the padding of the container within a navbar when it turn toggleable.

It seems it's by design. See navbar docs:

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-toggleable-* class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

[AlessandroVecchi]

Why the navbar brand and the toggle button are centered at lowest viewports?
I think it is a bug!

You can see the same problem in the bootstrap docs.

[wolfhoundjesse]

@AlessandroVecchi The padding goes away at lower breakpoints, but the margin-left: auto and margin-right: auto do not. This causes your brand to appear centered.

For now I've nested the brand in the collapsible div, but I'm open to suggestions for fixing the margins as well.

[AlessandroVecchi]

I added this class to the .container.

@media (max-width:543px) { .fixbugbsalpha6 { width: 100%;} }

[mdo]

Have a fix for this inbound. Demo at http://jsfiddle.net/2t6e0ryh/7/.

[jonsa]

Sorry about the late the response but the solution is rather inconsistent, is it not?

On large screens the content in the navbar align with the sides of the content.

On smaller screens it's outside

To go back to aligned again on really small devices