使引导分页水平溢出答案

【问题标题】：Make bootstrap pagination overflow horizontally使引导分页水平溢出
【发布时间】：2017-01-16 04:33:59
【问题描述】：

我正在使用引导程序编写一个字母数字过滤器/分页组件。

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

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

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

有什么提示吗？

【问题讨论】：

标签： css twitter-bootstrap pagination

【解决方案1】：

使用.flex-wrap 类，如下所示

<ul class="pagination flex-wrap">
...
</ul>

【讨论】：

【解决方案2】：

您可以将<li> 的display 属性设置为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>

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

【讨论】：

【解决方案3】：

最简单的方法是将display: table-cell; 设置为.pagination>li 并将display: table; 设置为.pagination 元素本身。我为#client-paginator、html 和 body 设置了一些 CSS 样式，只是为了让它看起来更好看。

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
#client-paginator {
  position: relative;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}
.pagination {
  display: table !important;
}
.pagination>li {
  display: table-cell !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <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>
</body>

</html>

【讨论】：