Bootstrap 3: pull-right не помещается в заголовок панели

Question

Я хочу добавить компоненты в правой части заголовка панели. Однако, используя pull-right, div не помещается в заголовок. Как это решить?

Здесь HTML:

<div class="panel-heading"> 
    <strong>{% trans 'Properties' %}</strong>&nbsp;({{ property_list|length }}) 
    <div class="pull-right"> 
     <form class="form-inline" accept-charset="UTF-8" method="get"> 
      <input name="utf8" type="hidden" value="✓"> 
      <div class="form-group"> 
       <input type="search" name="search" id="search" value="{{ search }}" placeholder="{% trans 'Find property by name' %}" class="form-control" spellcheck="false"> 
      </div> 
      <button name="button" type="submit" class="btn btn-default" title="{% trans 'Search' %}"><i class="fa fa-search"></i> 
      </button> 
     </form> 
    </div> 
</div> 

Answer 1

Вы можете попробовать что-то вроде этого. Вам просто нужно использовать text-right, так как форма рядная ..

<div class="panel panel-default"> 
    <div class="panel-heading text-right"> 
     <span class="pull-left"><strong>{% trans 'Properties' %}</strong>&nbsp;({{ property_list|length }})</span> 
     <div class=""> 
      <form class="form-inline" accept-charset="UTF-8" method="get"> 
       <input name="utf8" type="hidden" value="✓"> 
       <div class="form-group"> 
        <input type="search" name="search" id="search" value="{{ search }}" placeholder="{% trans 'Find property by name' %}" class="form-control" spellcheck="false"> 
       </div> 
       <button name="button" type="submit" class="btn btn-default" title="{% trans 'Search' %}"><i class="fa fa-search"></i> 
       </button> 
      </form> 
     </div> 
    </div> 
    <div class="panel-body">..</div> 
</div> 

http://www.codeply.com/go/4s0omPtRLt

Answer 2

Я также фиксированный мою проблему так:

.panel-heading { 
    overflow: hidden; 
}