使用表单输入时Bootstrap分页中的相等列

Question

考虑这个示例分页：

<nav aria-label="Pagination" class="text-center">
  <ul class="pagination pagination-sm">
    <li><a href="#">Previous</a></li>
    <li class="disabled">
      <span>Custom content here with <input value="input"></span>
    </li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

我想在其中一列中输入一个输入类型。但是除了文本之外什么都没有，导致列的高度不相同：

我需要申请哪些CSS才能使所有列相等？此示例也可在jsFiddle上找到。

更新

使用.pagination a, .pagination span {height: 40px}我的所有列都相同，但我无法将内部文本显示在一行中。

Answer 1

你可以用一点css来覆盖

<强> CSS ：

.pagination{display:inline-flex}
.pagination > li > a{height:100%; display:flex; align-items:center}

Bootply ：https://www.bootply.com/W8NpMS4ml7