hyperlink menu in Bootstrap 4 navbar bleeds into inline-form - html

Question

According to Bootstrap 4 site a navbar with forms should work:
https://v4-alpha.getbootstrap.com/components/navbar/#forms
I use the class="form-inline" and on the same html level the ul-tag with the 3 hypermenu-links.
See this codepen:
http://codepen.io/anon/pen/eWOKXL?editors=1010
HTML
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">my-app</a>
<div class="form-inline my-2 my-lg-0">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-primary">Create</a>
</span>
<select class="form-control">
<option selected >Item AAAAAAAAAAAAAABBBBBBBBBB CCCCCCCCC</option>
</select> <span class="input-group-btn">
<div class="btn-group">
<button class="btn btn-secondary" >Open</button>
<button class="btn btn-secondary" data-placement="bottom" triggers="manual" #p="ngbPopover" [ngbPopover]="popContent"
popoverTitle="Delete?">Delete</button>
</div>
</span>
</div>
</div>
</div>
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item"> <a class="nav-link">link11111111111111</a></li>
<li class="nav-item"> <a class="nav-link">link22222222222222</a></li>
<li class="nav-item"> <a class="nav-link">link33333333333333</a></li>
</ul>
<div ngbDropdown class="justify-content-end d-inline-block">
<button class="btn btn-secondary" id="dropdownMenu1" ngbDropdownToggle>Items</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Item1</button>
<button class="dropdown-item" >Item2</button>
</div>
</div>
</div>
</nav>
Just resize the window and see the 3 menulinks will bleed into the main element with class="form-inline".
How can I fix that? Looking at the BS4 sample I see that first comes the menulinks then the form-inline element. I have it the other way round.

Answer 1

I'd recommend taking out the form-group around the input-group. Make 2 separate input-group-btns instead of the btn-group. Also, remember BS4 is still in alpha so it's not yet a stable release.
http://www.codeply.com/go/jFOUKGF10Z
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">my-app</a>
<div class="form-inline my-2 my-lg-0">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-primary">Create</a>
</span>
<select class="form-control pr-4">
<option selected="">Item AAAAAAAAAAAAAABBBBBBBBBB CCCCCCCCC</option>
</select>
<div class="input-group-btn">
<button class="btn btn-secondary">Open</button>
</div>
<div class="input-group-btn">
<button class="btn btn-secondary" data-placement="bottom" triggers="manual" #p="ngbPopover" [ngbpopover]="popContent" popovertitle="Delete?">Delete</button>
</div>
</div>
</div>
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item"> <a class="nav-link">link11111111111111</a></li>
<li class="nav-item"> <a class="nav-link">link22222222222222</a></li>
<li class="nav-item"> <a class="nav-link">link33333333333333</a></li>
</ul>
<div ngbdropdown="" class="justify-content-end d-inline-block">
<button class="btn btn-secondary" id="dropdownMenu1" ngbdropdowntoggle="">Items</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Item1</button>
<button class="dropdown-item">Item2</button>
</div>
</div>
</div>
</nav>