Zurb Foundation 6 - 如何阻止分页项目隐藏在小屏幕上？

Question

如何关闭 foundation 的分页或阻止它在小屏幕上隐藏我的分页项目？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">

<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>

<div class="container">
  <ul class="pagination text-center" role="navigation" aria-label="Pagination">
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
  </ul>
</div>

<script>
  $(function() {
    $(document).foundation();
  });
</script>

如果您在小屏幕上查看默认分页，它会显示第一项和最后一项。但我希望所有项即使在小屏幕上也能显示，就像在 Bootstrap 中一样。可能吗？

Answer 1

您可以使用：

.pagination li {
  display: inline-block !important;
}

如果您只想在小屏幕上强制使用它，可以选择将其包装在 media query 中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">

<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<style>
.pagination li {
  display: inline-block !important;
}
</style>
<div class="container">
  <ul class="pagination text-center" role="navigation" aria-label="Pagination">
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
  </ul>
</div>

<script>
  $(function() {
    $(document).foundation();
  });
</script>

Zurb Foundation 6 - 如何阻止分页项目隐藏在小屏幕上？

Zurb Foundation 6 - how to stop the pagination items from being hidden on the small screen?

jquery

twitter-bootstrap

pagination

zurb-foundation

zurb-foundation-6