устанавливающиеся компоненты в одной строке

Question

У меня есть следующий HTML-код, используя загрузочный 3.0

<div class="container"> 
    <div class="input-group" style="width: 300px"> 
     <input type="text" class="form-control input-sm" placeholder="Search Ticket" /> 
     <span class="input-group-btn"> 
      <button class="btn btn-default btn-sm btn-default-gradient" type="button"> 
       <i class="glyphicon glyphicon-search"></i> 
      </button> 
     </span> 
    </div> 

    <div class="btn-group pull-left" > 
     <button type="button" class="btn btn-default btn-sm btn-default-gradient"> 
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search Tools 
     </button> 
    </div> 

    <div class="btn-group pull-right" > 
     <button type="button" class="btn btn-default btn-sm btn-default-gradient"> 
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> New Ticket 
     </button> 
    </div> 
</div> 

Как это выглядит сейчас:

Exected:

Как могу ли я достичь ожидаемого результата?

Answer 1

There you go

Вы должны использовать display: inline; свойство.

Answer 2

Попробуйте использовать собственный класс начальной загрузки bootstrap.

Просто обернуть HTML в DIV с классом 'форм-инлайн', как это:

<form class="form-inline"> 
    <div class="container"> 
     <div class="input-group" style="width: 300px"> 
      <input type="text" class="form-control input-sm" placeholder="Search Ticket" /> 
      <span class="input-group-btn"> 
       <button class="btn btn-default btn-sm btn-default-gradient" type="button"> 
        <i class="glyphicon glyphicon-search"></i> 
       </button> 
      </span> 
     </div> 

     <div class="btn-group pull-left" > 
      <button type="button" class="btn btn-default btn-sm btn-default-gradient"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search Tools 
      </button> 
     </div> 

     <div class="btn-group pull-right" > 
      <button type="button" class="btn btn-default btn-sm btn-default-gradient"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> New Ticket 
      </button> 
     </div>  
    </div> 
    </form> 

http://jsfiddle.net/xnngmf1b/5/

Смотрите эту ссылку: http://getbootstrap.com/css/#forms-inline

PS: это работает только для большого скрининга устройства> 768px.