Bootstrap: V4 issue with .container-fluid inside navbar

[eddywashere]

In Bootstrap v3 and up to v4-alpha.5, .container-fluid could be used inside of .navbar. Based on flexbox changes in master, that is no longer supported.

Here's a codepen example with .container and .container-fluid inside .navbar: http://codepen.io/eddywashere/pen/MJWzVg

Codepen external css is pointing to this commit.

There is some extra css commented out in the css tab. 1) I tried adding what is used for .container in _navbar.scss and 2) I typically add a max-width to container-fluid to prevent super wide content views.

[mdo]

You no longer need a .container-fluid within a full width navbar. Near as I can tell while building out the new navbar, it was extraneous. Does it's omission cause any issues for you?

[eddywashere]

I think the issue is an expectation of being able to interchange .container with .container-fluid. My mental model is that .container is for fixed sizing within breakpoints vs .container-fluid for fluid sizing through all breakpoints. It's not super extraneous because it allows finer control over the nav inside navbar and the navbar background (wrapper). Here's an example where setting a max-width on the .container-fluid helps control nav content.

I think it's also worth noting that I expected a simple nav like the one here to work without a .navbar-toggleable* class since there is nothing to toggle. Had to dig through docs to find that out.

[cuiliang]

Some times we need allow user toggle between .container wrapped mode and full width mode.

If we add div.container wrapper around navbar-nav first and then we try to change to full width mode by removing .container class from the wrapper div or replace it with .container-fluid, the navbar-brand and navbar-nav will be splitted into multiple lines.

[browner12]

I am also running into a strange navbar issue when I have it in a .container. my .navbar-brand and my .navbar-toggler were both sitting in the middle of the page overlapping each other. this was due to the left and right margin set to 'auto'. At the different breakpoints the .container gets a width. Should the .container width be '100%' by default (xs size)?

if this should be a separate issue, let me know and I can break it off.

[mdo]

@browner12 Separate issue, fixed in v4-dev.

[nextgenthemes]

@mdo .container-fluid (or a container to limit the maximal width is needed If we want to have a navbar outside of any container but I want to limit the content inside it. The thing here is that limiting the maximal width of .container-fluid is not part of BS (never was I guess).

I personally never ever got the .container class. I always used .container-fluid and limited its maximal width see #22008.

I was about to post the same issue until I found this. And I thought I fixed this by giving the container-fluid a 100% width but this makes the navbar-nav go below the brand.

See this Codepen.

[nimmolo]

@eddywashere @mdo @nextgenthemes yes - limiting the max-width of .container-fluid would definitely be useful for me, and being able to use that to put a max-width on both the elements inside the navbar and the goods on the page. Having control over the padding of .container-fluid at different breakpoints would be good too. With extra wide screens there is usually a usability limit.

[nextgenthemes]

21901 Has has a partly fix for my problem. It still needs the width: 100% in the .container-fluid and I am not really good with flexbox yet, not sure if this is the right way to do this but I have it working.

// edit
Actually, its still broken. I have the fixed applied to my project I am working on locally and I have it working here by applying the #21901 patch and adding a with: 100% to the container-fluid in devtools. So I have no idea why the pen fails.

See this pen.

[zalog]

.container has by default 1140px - https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L221
If you want .container and .container-fluid to stay on the same line, just set .container-fluid { max-width: 1140px; } in your pen.