navbar-right contents side by side

Question

私はトップに固定されたブートストラップnavbarを持っています。左側にはブランドがあり、右側にはコンボボックスとnavbarフォームがあります。しかし、問題は正しい内容がお互いの上にあふれている。私は彼らのお互いにすぐ隣に置いておきます。コンボボックスが最初に来てからフォームに来るべきです。ここで はスクリーンショットです：

そして、ここでは、コードです：

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> 
        <img alt="Brand" src="img/nice.png" width="100" height="100"> 
       </a> 
      </div> 
      <div class="links navbar-right"> 
       <!-- Split button --> 
       <div class="btn-group"> 
       <button type="button" class="btn btn-default">Action</button> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
       </ul> 
       </div> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search for..."> 
         <span class="input-group-btn"> 
         <button class="btn btn-default" type="button">Go!</button> 
         </span> 
        </div> 
       </form> 
      </div> 
     </div> 
    </nav> 

CSS：

.navbar-header .navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 10px 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

事前にありがとうございます！

Answer 1

ちょうどこの操作を行います。デフォルトでは `インラインブロックを設定し、すべてのスペースを拡大すると発表したそれだけ拡大する、blockに設定され、デフォルトで

要素form要素

.navbar-form{ 
    display:inline-block; 
} 

DEMOです