引导程序3：向右拉不能放入面板标题

Question

我想在面板标题的右侧添加组件。然而，使用拉右，该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; 
}