使引导分页高度与输入+按钮高度相等

Question

我已经使用“跳转到页面”选项扩展了分页（Bootstrap 样式），但一直在努力使分页器列表高度与输入和提交按钮的高度相匹配。不记得到目前为止我尝试过的所有内容，但这是最新的代码，它最接近我想要的。尽管如此，列表高度为 29px，输入高度 (.input-sm) 为 30px，按钮高度 (btn-sm) 为 32px。

HTML 代码：

<ul class="pagination">
    <li><a href="?&page=Batch">First</a></li>
    <li><a href="?pn=251&perpage=50&page=Batch">Prev</a></li>
    <li><a href="?pn=245&perpage=50&page=Batch">245</a></li>
    ....
    <li><a href="?pn=253&perpage=50&page=Batch">Next</a></li>
    <li><a href="?pn=1693&perpage=50&page=Batch">Last</a></li>
    <form method="get" class="form-horizontal" action="">
        <div class="form-group input-group col-md-2">
            <input type="hidden" name="page" value="Batch" />
            <input type="hidden" name="perpage" value="50" />
            <input required type="text" class="form-control input-sm" name="pn" size="4" placeholder="Page #">
            <span class="input-group-btn"><button class="btn btn-default btn-sm" type="button">Go!</button></span>
        </div>
    </form>
</ul>

额外的 CSS（与 bootstrap 相同，仅适用于 input 和 button）：

.pagination input,
.pagination button {
    margin-left: -1px;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 6px 12px;
}

https://jsfiddle.net/dsd2zd6c/

编辑：问题已解决。 罪魁祸首是我的自定义样式文件中出现的一些 CSS 样式。 我在自定义样式文件的分页代码上方有 body {font: 11px/16px Verdana, Arial, Helvetica, sans-serif;} 和 {font-size:11px;}。删除它们，列表项和输入/按钮高度现在相等。

Answer 1

通过从您的输入和按钮中删除尺寸类（input-sm、btn-sm），您的填充设置就会启动并完成工作。

 <input required type="text" class="form-control" name="pn" size="4" placeholder="Page #">
 <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>

这是一个更新的 JSfiddle：https://jsfiddle.net/L7tq5nzd/