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

1 回答

• 2

  您可以使用：

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

  如果您只想在小屏幕上强制它，可以选择将其包装在_1386086中 .

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

  回复于 2024-04-27T03:01:50+08:00