Hyperlink Menü in Bootstrap 4 navbar blutet in Inline-Form

Question

Nach Bootstrap 4 Website ein navbar mit Formularen arbeiten sollte:

https://v4-alpha.getbootstrap.com/components/navbar/#forms

verwende ich die class="form-inline" und auf der gleichen HTML-Ebene die ul-tag mit dem 3 Hypermenü-Links.

Sehen Sie diese 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> 

Gerade die Größe des Fensters und sehen Sie die 3 menulinks in das Hauptelement mit class="form-inline" bluten.

Wie kann ich das beheben? Betrachtet man das BS4-Beispiel, sehe ich, dass zuerst die Menulinks und dann das Form-Inline-Element kommen. Ich habe es umgekehrt.

Answer 1

Ich würde empfehlen, die form-group um die input-group herauszunehmen. Stellen Sie 2 separate input-group-btn s anstelle der btn-group. Denken Sie auch daran, BS4 ist immer noch in Alpha, also ist es noch keine stabile Version.

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>