Alpha version 6. .container inside .navbar on extra small screens (.xs) does not render 100% width using .col-12

[classicmike]

Currently on Alpha version 6, you wish to set your nav items in the navbar constrained within your container div, similar to what is currently on the Bootstrap 4 site. I would find this a common use case scenario.

Despite you setting a wanting to set a full width column on extra small screens ('xs') using the grid's .col-12 class, when viewing the page in xs breakpoint screen size, it seems like the widths are never ever 100% width and the size of the column would depend on the width of the content and it is 'centered'.

E.g. html below which would trigger this issue:

<div class="navbar bg-primary">
    <div class="container">
        <div class="row">
           <div class="col-12">
               <p>Hello World</p>
           </div>
        </div>
    </div>
</div>

Under Bootstrap 3 with the above code, the behaviour would render the column the correct 100% width and text would start from the left of the page.

You can see the results of the test here. This also shows a comparison with a similar markup structure without the '.navbar' div:
https://jsbin.com/fetikulimu/edit?html,output

I have a feeling it would be due to the flexbox configuration set to display as flex and the .container div not explicitly stating that it should be 100% width on xs screens.

Unless if there was an intention to do things this way, I think the way to fix this, is that if you set the .container width to 100% by default you can avoid any future issues where you wrap the .container with a flex-boxed div.

Other issue information as follows:

• Operating system and version: MacOS ver. 10.12.3
• Browser and version: Chrome ver. 58.0.3029.110

Only tested on the above but I'm pretty sure it will happen on other devices/browsers as well.

Cheers.

[mdo]

Dupe many times over. See #21590.