부트 스트랩 3 패널 제목에 컨트롤 추가

Question

원하는 결과 : 제목 왼쪽에 제목이 있고 검색을 위해 addon 버튼이있는 검색 텍스트 필드가 있습니다. 마지막 아이콘은 일부 패널 바디 옵션을 설정하기위한 옵션/렌치 버튼입니다.

현재 코드 :

<div class="container"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading clearfix"> 
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> 
       <div class="input-group pull-right"> 
        <input type="text" class="form-control" placeholder="Search"> 
        <div class="input-group-btn"> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button> 
        </div> 
       </div> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 
</div> 

현재 결과 : 나는 패널 헤더는 한 줄에 욕망. 우리가 더 작은 크기로 갈 때 나는 약간의 조정을 할 것입니다. 그러나 현재 코드로 인해 여러 행으로 구성 요소가 래핑됩니다.

Answer 1

입력 그룹에 .pull-right 클래스를 제거하면됩니다.

: 당신이 입력을 원하는 경우에

<div class="container"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading clearfix"> 
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
        <div class="input-group-btn"> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button> 
        </div> 
       </div> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 
</div> 

Working Example

는 업데이트

작고 오른쪽 정렬, 당신은 CSS를 통해이 같은 작업을 수행 할 수 있습니다 (I는 그것에게 ID #Special을했다)

#Special { 
    width: 200px; 
    float: right; 
} 

html :

,210

<input id="Special" type="text" class="form-control" placeholder="Search"> 

Updated Example