顯示線路上的形式下倒塌的導航欄

Question

這裏是我當前的代碼：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> 

目前，倒塌時，搜索欄落在下的摺疊部分。我希望搜索欄位於摺疊部分之外，但不要與navbar-brand和摺疊按鈕位於同一行。如果我將form移到navbar-header div的內部，它會完成我想要的操作，但邊距全部搞砸了，因爲引導程序仍認爲搜索欄與其他項目位於同一行。

有沒有辦法做得更好，還是我只需要將它移動到navbar-header並修復彈出的格式問題？

Answer 1

這是你在找什麼？這仍然是一個粗略的修復使用CSS。我已經改變了表單塊的位置以及一個css修復。其他響應式tweek可以用於其他屏幕設備。

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將bootstrap.css後應用*/

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