我在分页中使用 boostrap4 主题，当以比我的显示器更小的分辨率加载页面时，我遇到了一个问题，即分页超出了父 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
在 iPad 分辨率上查看多列，它是一团乱七八糟的分页器重叠
最佳答案
您可以使用此代码
<!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>关于html - 引导分页根据分辨率溢出父 div，如何缩小它或换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58430529/