ブートストラップナビで右側の白いバー

Question

リンク（LI要素）と折りたたまれずに小さな画面の下に表示される右の検索ボックスを使ってナビゲーションバーをレンダリングしようとしています。

のコードはほぼで、検索バーが必要に応じて別々に表示されます。私は、正確な原因や解決方法を特定するのに苦労しています。コンテナがnav要素のすぐ下に置かれた場合、Navbarが折り​​畳まれたときにのみバーが表示されるようです。

ナビゲーションバーコード：

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="/">Food</a> 
    </div> 
    <div class="nav navbar-nav navbar-right"> 
     <form class="navbar-form" action="/results/" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
       <div class="input-group-btn"> 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="/">Home</a></li> 
     <li><a href="/item/food/">foods</a></li> 
     <li><a href="/item/wine/">wines</a></li> 
     <li><a href="/admin/">admin</a></li> 
     </ul> 
     </div> 
    </div> 
</nav> 

は、次のことをReviewdが、ソリューションのどれも私の問題 Twitter bootstrap white gap on right side of page

Answer 1

を修正するために見えた私は、あなたの問題はナビゲーションバーフォームから来るかもしれないと思います。これを解決するには、col-xs-12クラスのdivにラップしてください。

<div class="col-xs-12"> 
    <form class="navbar-form " action="/results/" role="search"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
      <div class="input-group-btn"> 
       <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
      </div> 
     </div> 
    </form> 
    </div> 

これで問題は解決します。