Bootstrap: Flexbox navbar elements wrap onto new line instead of inline

[rosskevin]

Meta list: #18467

Test case

It appears that there is not an implementation for nav items that responds to $enable-flex: true;. This may not be in-scope, but wanted to mention it.

NOTE that it is not based on compiled css with $enable-flex: true; as that doesn't exist in dist. Nonetheless, I see the same behavior in a flex enabled scenario. Here's a screenshot of the same thing rendered with $enable-flex: true;:

[rosskevin]

Bootlint failed on a sample copied from the v4 navbar docs :)

I updated the test case with an inner container.

[acshef]

Ignore Bootlint in this case: https://github.com/twbs/bootstrap/issues/18790#issuecomment-169620411

[gabelloyd]

Not sure if this is still an issue, but I think if you make the container class have flex-direction: row, it solves the issue.

https://gist.github.com/alwaysbrightblue/a66fed1fb9f7210fe803

[rosskevin]

This may be a good flex setup:

.navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;

  > * {
    flex-shrink: 0;
  }
}

The problem I see with integrating this is the doc/examples with identical markup. I'll take a shot at a navbar flexbox PR and see if I can get something working both ways.

[rosskevin]

PR #18976 flexbox enables the navbar

[jorge-sanz]

Is this issue solved because of #18976? @rosskevin

[rosskevin]

@jorge-sanz it is for me. I'm using directly in bootstrap-material-design v4 (we are standardizing on flex-only)

[jorge-sanz]

Ok! Cool! I am a newbie contributor and I would like to start to code for Bootstrap! @rosskevin