.container within navbar undoes ability to use flexbox positioning

[henwen]

A stated goal of the Alpha6 .navbar is the ability to use flexbox to position items within.

This works fine for elements that are immediate children of .navbar (the flex parent). However, when a .container is placed within .navbar (a common pattern), flexbox positioning is no longer an option because .container is not display: flex.

One could manually add d-flex but that seems unintuitive when display: flex is presented as the assumed display context for navbars.

[davidtmiller]

+1 I am seeing the same issue.

The left and right margins that are set to the container class are having some strange interaction with the navbar.

• Mac OS 10.12.2
• Chrome

Here is the issue in action:

If you go into the inspector and disable margin-left: auto and margin-right: auto on the .container class then things go back to normal on mobile, but this isn't a fix because it messes up the alignment of the container on larger screens where the container width is less than the screen width.

Here's what it looks like on mobile with the margins disabled though:

It looks like if you disable the auto margins at <576px then the problem is remedied, but I'm not sure if there would be other consequences of doing so.

UPDATE: Adding margin-left: 0 and margin-right: 0 at <576px to .container disables the ability to toggle the navbar. Exploring more fixes...

[henwen]

@davidtmiller I believe you're experiencing this issue, which also seems related to container being the only flex item within the navbar flex parent.

[davidtmiller]

@henwen Yep that's the one...thanks!

[davidtmiller]

Fixes in #21605

[pvdlg]

@davidtmiller, I think this is a different issue. What @henwen report is that .navbar is display: flex and allow to position its content with flex, while .container is not display: flex.

Is it your actual issue @henwen ?

Although, a .container within a .navbar is display: flex, but only at a breakpoint in which the navbar is expanded (i.e. no toggle button and all item visible). See _navbar.scss#L155.

Indeed, a .container within a .navbar is not display: flex when the menu is collapsible (nav-item non visible in the top bar, toggle button visible).

Is what you trying to achieve is to position with flex the content of the container when the navbar is collapsible ?

[henwen]

@vanduynslagerp yep, that's my actual issue, and it's the case regardless of whether the navbar is collapsible or not.

[mdo]

I believe the container issue was fixed with #21722.