ブートストラップのナビゲーションバーでテキスト入力

Question

私はナビゲーションバーを作るためにブートストラップを使用しています。検索バーを追加しようとすると、その横の代わりに他の要素の下に移動します。

私はjQueryとBootstrap JavaScriptを、headタグにインポートされたBootstrap CSSと一緒にインポートしました。あなたがサンプルとしてDefault navbarを使用することができます

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <a class="navbar-brand" href="#"><img src="logo.png"></a> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">Home</a></li> 
 

 
      <form class="navbar-form"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
      <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
 
     </form> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

1. 。
2. フォームを<ul></ul>ブロックの外側に配置します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <a class="navbar-brand" href="#"><img src="logo.png"></a> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Home</a></li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>