均化引导分页高度与输入+按键高度

我有一个“跳跃到页面”选项扩大了分页（引导风格），但一直在努力获得分页程序列表高度匹配的输入和提交按钮。到目前为止，我记不清所有尝试过的东西，但这是最新的代码，与我想要的最接近。不过，列表高度是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（同自举，仅适用于input和button）：

https://jsfiddle.net/dsd2zd6c/

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

来源

2017-07-31 cheeseus

通过从您输入的按钮和按钮中删除尺寸类别（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/

来源

2017-07-31 17:51:01 Laszlo

不，不，对不起。看小提琴 - 它和我的完全一样。我试过了。删除'input-sm'和'btn-sm'类的唯一办法是均衡输入和按钮高度（在34px处），但它们现在比分页（29px）大得多。 – cheeseus

这真的很奇怪：我只是通过删除两个类来更新您提示的小提琴，现在分页和输入和按钮的高度相同。我有完全相同的代码（html + css），我已经清除了缓存，但是我无法得到相同的结果。和你的小提琴一样。 – cheeseus

我发现了这个问题。它在其他一些CSS中受到干扰。我在自定义样式文件中的分页代码上方有'body {font：11px/16px Verdana，Arial，Helvetica，sans-serif;}'，然后是'{font-size：11px;}'。删除它们，列表项和输入/按钮高度现在相等。 – cheeseus

均化引导分页高度与输入+按键高度

回答

相关问题