navbar-right 내용 나란히 나란히

Question

나는 왼쪽에는 브랜드가 있고 오른쪽에는 콤보 상자와 navbar form이있다. 고정 된 부트 스트랩 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로 설정 기본적으로, 기본적으로는 확장됩니다 인라인 블록 요소

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

DEMO에게있다 '설정, 모든 공간을 확장 것이라고 말했다 요소 form