在 Bootstrap 3 面板标题中嵌入搜索表单

Question

我正在尝试在面板标题的右侧嵌入搜索表单：

  <div class="panel-heading">
    <h3 class="panel-title">Results <span class="badge">6</span></h3>

  <form class="form-inline pull-right" role="search" method="get" action="/tbl">
    <div class="form-group">
      <input type="text" name="criteria" class="form-control" value="<%= params[:criteria] if params[:criteria] %>" placeholder="<%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %>">
      <div class="input-group-btn">
        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>

  </div>

不幸的是，我遇到了对齐问题：

在 Safari (8.0.3) 中：

在 Firefox (35.0.1) 中：

有没有办法做到这一点，最好不要自定义 CSS？

JSFiddle

Answer 1

差不多，看到这个fiddle

我将标题和搜索框放入 col div 中，但 id 必须向标题添加一点填充以使其与搜索框对齐

CSS:

.padFix{
    padding-top:8px;
}

HTML:

  <div class="panel-heading ">
      <div class="row">
          <div class="col-sm-6">
              <h3 class="panel-title padFix">Results <span class="badge">6</span></h3></div>
              <div class="col-sm-6">
                  <form role="search" method="get" action="/tbl">
                    <div class="input-group">
                       <input type="text" name="criteria" class="form-control" value="<%= params[:criteria] if params[:criteria] %>" placeholder="<%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %>">
                       <div class="input-group-btn">
                          <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                       </div>
                    </div>
                </form>
          </div>
      </div>
  </div>

Answer 2

在这里分享我的答案，这可能会有用

JS Fiddle

这是代码

HTML

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading clearfix">
        <h4 class="panel-title pull-left" style="padding-top: 7.5px;">
            Header
          </h4>
        <div class="btn-group pull-right">
          <input type="text" class="custom_input">
          <button class="btn btn-success pull-right" style="height: 30px;">
            Search
          </button>
        </div>
      </div>
      <div class="panel-body">
        Content Body
      </div>
      <div class="panel-footer">
        Content Footer
      </div>
    </div>
  </div>
</div>

CSS

.custom_input {
  padding: 4px 5px;
  border: 1px solid #d3e0e9;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  border-right: none;
  height: 30px;
}

谢谢你:-)

在 Bootstrap 3 面板标题中嵌入搜索表单

Embed a search form in Bootstrap 3 panel heading

css

twitter-bootstrap

twitter-bootstrap-3