Bootstrap CSS面板标题调整

Question

我有一个用于保存数据表的面板。我正在使用搜索框和分页，以允许一些过滤选项，但间距和边距不如我想要的那样精细调整。

<div class="panel panel-default">
<div class="panel-heading"><span class="title"><i class="fa fa-folder-open"></i>&nbsp;&nbsp;Open Items</span>  <span class="col-xs-3 pull-right"><input type="text" class="form-control" id="searchbox" placeholder="Search the results..."></span>
</div>
<div class="panel-body">

    <table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

    </div>
<div class="panel-footer">
    <ul class="pagination pull-right">
        <li class="disabled"><a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
        </li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
        <li><a href="#">5</a>
        </li>
        <li><a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
        </li>
    </ul>
    <br />
    <br />
</div>

在下面的图片中，我试图在标题中垂直居中标题，但似乎搜索框导致它推到顶部。

此外，即使我拿出边距，底部的分页仍然有差距。

这是我想要完成的事情的一小部分：http://jsfiddle.net/x5o9dtt2/1/

Answer 1

用这个替换你的CSS -

.panel-footer {
    background-color: #f5f5f5;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #dddddd;
    padding: 5px;
    line-height: 17px;
}
.panel-heading {
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    line-height: 35px;
    padding: 10px;
    vertical-align: middle;
}
.pagination {
    border-radius: 4px;
    display: inline-block;
    margin: 0 0;
    padding-left: 0;
}

这是bug report

Answer 2

通过设置行高，可以使标题与搜索垂直对齐。

页脚间隙是由页脚面板的填充而不是页面边缘引起的。此外，我增加了分页的行高，因为分页下面的空间是未知的。

.panel-footer {
  padding: 0;
}
.panel-heading {
  line-height: 35px;
  padding: 10px;
  vertical-align: middle;
}
.pagination > li > a,
.pagination > li > span {
  line-height: 1.9;
}

<强>输出：

JSfiddle