Bootstrap 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;
}