css - 使 Bootstrap 分页水平溢出

Question

我正在使用 Bootstrap 编写字母数字过滤器/分页组件。

我遇到的问题是，我需要它可以水平滚动(即 overflow-x: scroll)，而作为一个智能响应框架，Bootstrap 自然地包装了组件 ...

https://jsbin.com/hubuxem/edit?html,output

我知道有使用标准 Bootstrap 列的解决方案(例如 https://stackoverflow.com/a/19838783/4341756 )，但我非常想使用分页组件来保持一致性和样式。

有什么提示吗？

Answer 1

您可以设置 <li>的 display属性(property)inline-block ，像这样:

.pagination {
  white-space: nowrap;
}

#client-paginator {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 200px;
  width: 100%;
  padding: 0 15px;
}

#client-paginator li {
  display: inline-block;  
}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="client-paginator">
  <ul class="pagination">

    <li><a id="pag-123">123</a>
    </li>
    <li><a id="pag-a">A</a>
    </li>
    <li><a id="pag-b">B</a>
    </li>
    <li><a id="pag-c">C</a>
    </li>
    <li><a id="pag-d">D</a>
    </li>
    <li><a id="pag-e">E</a>
    </li>
    <li><a id="pag-f">F</a>
    </li>
    <li class=""><a id="pag-g">G</a>
    </li>
    <li><a id="pag-h">H</a>
    </li>
    <li><a id="pag-i">I</a>
    </li>
    <li><a id="pag-j">J</a>
    </li>
    <li><a id="pag-k">K</a>
    </li>
    <li><a id="pag-l">L</a>
    </li>
    <li class="active"><a id="pag-m">M</a>
    </li>
    <li><a id="pag-n">N</a>
    </li>
    <li class=""><a id="pag-o">O</a>
    </li>
    <li class=""><a id="pag-P">P</a>
    </li>
    <li><a id="pag-q">Q</a>
    </li>
    <li><a id="pag-r">R</a>
    </li>
    <li><a id="pag-s">S</a>
    </li>
    <li><a id="pag-t">T</a>
    </li>
    <li class=""><a id="pag-u">U</a>
    </li>
    <li><a id="pag-v">V</a>
    </li>
    <li><a id="pag-w">W</a>
    </li>
    <li><a id="pag-x">X</a>
    </li>
    <li><a id="pag-y">Y</a>
    </li>
    <li><a id="pag-z">Z</a>
    </li>
    <li class=""><a id="pag-ä">Ä</a>
    </li>
    <li class=""><a id="pag-ö">Ö</a>
    </li>
    <li class=""><a id="pag-ü">Ü</a>
    </li>
  </ul>

</div>

编辑:刚刚意识到这将在分页元素之间引入众所周知的空白。有很多方法可以摆脱这些，但我不喜欢其中任何一种。