Auf einer Linie ein Formular nach dem kollabierten navbar

Question

Hier ist mein aktueller Code ist: https://www.bootply.com/EJSJ6aQh6Q

<div class="row"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span>...</span> 
    </button> 
    <a class="navbar-brand">Brand</a> 
</div> 
<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bar<span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a>A</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Foo<span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a>A</a></li> 
      </ul> 
     </li> 
     <li> 
      <a>Subscribe</a> </li> 
    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><a id="registerLink">Register</a></li> 
     <li><a id="loginLink">Sign In</a></li> 
    </ul> 

    <form class="nav navbar-form navbar-right col-md-6" id="autocompleteSearchForm" method="get" role="search"> 
    <div class="input-group input-group-circle input-group-sm" role="search" id="searchGroup"> 
           <span><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-songs"></div></div></span> 
           <span class="input-group-btn"> 
            <button class="btn btn-default" type="submit"><i class="fa fa-search text-success"></i></button> 
           </span> 
          </div> 
    </form> 
</div> 

Derzeit im zusammengeklappten Zustand fällt die Suchleiste unter dem kollabierten Abschnitt. Ich möchte, dass die Suchleiste außerhalb des minimierten Abschnitts liegt, aber nicht in derselben Zeile wie die Schaltfläche navbar-brand und Minimieren. Wenn ich die form innerhalb der navbar-header Div verschiebe, erreicht es, was ich will, aber die Ränder sind alle durcheinander, weil Bootstrap immer noch denkt, dass die Suchleiste in der gleichen Zeile wie die anderen Elemente ist.

Gibt es eine Möglichkeit, dies besser zu tun, oder muss ich es nur auf navbar-header verschieben und die Formatierungsprobleme beheben, die auftauchen?

Answer 1

Suchen Sie das? Es ist immer noch eine grobe Lösung mit CSS. Ich habe die Position des Formularblocks zusammen mit einem CSS-Fix vertauscht. Andere Responsive-Tweaks können für andere Bildschirmgeräte erstellt werden.

https://www.bootply.com/pGDMXu2Q2R#

HTML:

<div class="row"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span>...</span> 
     </button> 
     <a class="navbar-brand">Brand</a> 
    </div> 

    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bar<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a>A</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Foo<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a>A</a></li> 
       </ul> 
      </li> 
      <li> 
       <a>Subscribe</a> </li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
      <li><a id="registerLink">Register</a></li> 
      <li><a id="loginLink">Sign In</a></li> 
     </ul> 


    </div> 
    <form class="nav navbar-form navbar-right col-md-6" id="autocompleteSearchForm" method="get" role="search"> 
<div class="input-group input-group-circle input-group-sm" role="search" id="searchGroup"> 
            <span class="twitter-typeahead" style="position: relative; display: inline-block;"><input autocomplete="off" class="form-control typeahead-search tt-hint" type="text" value="" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0%/auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input autocomplete="off" class="form-control typeahead-search tt-input" id="home-search" name="searchString" placeholder="Search..." type="text" value="" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Open Sans&quot;, Optima, Segoe, &quot;Segoe UI&quot;, Candara, Calibri, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-songs"></div></div></span> 
            <span class="input-group-btn"> 
             <button class="btn btn-default" type="submit"><i class="fa fa-search text-success"></i></button> 
            </span> 
           </div> 
     </form> 
</div> 

CSS:

/* CSS hier verwendet wird, wird nach bootstrap.css */

@media (min-width:768px) { 
.navbar-form{ 
    position: absolute; 
    right: 135px; 
     top: 0; 
} 
} 
@media (max-width:767px){ 
.twitter-typeahead{ 
    display:block !important; 
} 
} 

angewendet werden