при начальной загрузке нумерация страниц переполняет родительский div в зависимости от разрешения, как его уменьшить или разбить строку? - PullRequest
Новая
       2

при начальной загрузке нумерация страниц переполняет родительский div в зависимости от разрешения, как его уменьшить или разбить строку?

0 голосов
/ 17 октября 2019

Я использую тематику boostrap4 для своей нумерации страниц. При загрузке страницы с меньшим разрешением, чем у моего монитора, я столкнулся с проблемой, когда paginate превышает родительский div и создает уродливый просмотр.

здесьмой пример кода: 

<div class="col-12 col-md-6 col-lg-3">
    <h3 class="text-capitalize">Devices</h3>
    <ul id="pager_device" class="pagination-sm mt-1 pagination"><li class="page-item first disabled"><a href="#" class="page-link">First</a></li><li class="page-item prev disabled"><a href="#" class="page-link">Previous</a></li><li class="page-item active"><a href="#" class="page-link">1</a></li><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item next"><a href="#" class="page-link">Next</a></li><li class="page-item last"><a href="#" class="page-link">Last</a></li></ul>
    <div id="pager_content_device">

        <div class="col-12 results item active">
            <div class="pt-4 border-bottom">
                <a class="page-url h4 text-primary" href="/config/device_details/460/118/">US-EDGE</a>
                <p class="page-description mt-1 text-muted"> Location: US <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
            </div>
        </div>

        <div class="col-12 results item">
            <div class="pt-4 border-bottom">
                <a class="page-url h4 text-primary" href="/config/device_details/5/1/">UK-EDGE</a>
                <p class="page-description mt-1 text-muted"> Location: UK <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
            </div>
        </div>
    </div>
</div>

вот несколько скриншотов при тестировании на телефоне или iPad

на телефоне, ширина col равна 12, и вы видите, выходя из col phone

, глядя на несколько столбцов на разрешении iPad, это беспорядок в пагинациях, перекрывающихся mutli cols

1 Ответ

0 голосов
/ 17 октября 2019

Вы можете использовать этот код 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Pagination</h2>
    <ul class="pagination pagination-separate pagination-curved synchronized-links">
      <li class="page-item first disabled"><a href="#" class="page-link">First</a></li>
      <li class="page-item prev disabled"><a href="#" class="page-link">Prev</a></li>
      <li class="page-item active"><a href="#" class="page-link">1</a></li>
      <li class="page-item"><a href="#" class="page-link">2</a></li>
      <li class="page-item"><a href="#" class="page-link">3</a></li>
      <li class="page-item"><a href="#" class="page-link">4</a></li>
      <li class="page-item"><a href="#" class="page-link">5</a></li>
      <li class="page-item"><a href="#" class="page-link">6</a></li>
      <li class="page-item next"><a href="#" class="page-link">Next</a></li>
      <li class="page-item last"><a href="#" class="page-link">Last</a></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...