折り畳まれたブートストラップnavbarで全幅入力

Question

私は、ブレークポイントを768pxから992pxに変更するためにブートストラップnavbarを変更しました。

問題をstackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse：ここで私が使用したソリューションです

1）画面サイズは、以下の条件の下で入力検索がされていません全幅768px & 992px

2間）の崩壊は、私はstackoverflowの上で見つかったwidth 100% &他の多くの提案を試してみた

をトグルされます。ここでdemo on codepen

期待（https://ibb.co/mwx4Qa）、現実です（https://ibb.co/jZAfyv）

HTML

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="mynav"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#link1">Link 1</a></li> 
     <form class="navbar-form navbar-left"> 
      <div class="input-group"> 
      <input type="text" class="form-control" name="q" placeholder="Search Google"> 
      <span class="input-group-btn"><button type="submit" class="btn btn-primary">Search</button></span> 
      </div> 
     </form> 
     </ul> 
    </div> 

    </div> 
</div> 

Answer 1

コンテナのdivあなたはそれを削除した場合、それが動作するはずですので、あなたのナビゲーションバーの幅を与えるものです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="navbar navbar-inverse navbar-static-top"> 
 

 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="mynav"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#link1">Link 1</a></li> 
 
     <form class="navbar-form navbar-left"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" name="q" placeholder="Search Google"> 
 
      <span class="input-group-btn"><button type="submit" class="btn btn-primary">Search</button></span> 
 
     </div> 
 
     </form> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

このコードをスタイルシートの下部に追加します。あなたのコードにテストされています。

@media (min-width: 768px) and (max-width: 991px) { 
    .navbar-form .input-group .input-group-btn { 
    width: 1%; 
    } 
}