Bootstrap5+Angular16：第二列内容重叠第一列而非自适应压缩问题

问题描述 #

在Angular 16中使用Bootstrap 5开发页面，设置屏幕宽度小于xl（1200px）时，「Filter」折叠面板转为「Filter」标签页。但出现以下问题：

• 屏幕宽度约1310px时，第二列内容停止自适应压缩；
• 宽度降至约1240px时，第二列开始与第一列重叠；
• 直到宽度低于1200px（第一列从col-xl-2变为col-1），布局才恢复正常。

相关代码 #

inventory-page.component.html #

<div class="container-fluid mt-5">
    <div class="row">

        <!-- Column 1, Filter Column-->
        <div class="col-xl-2 col-lg-1 col-1 p-0 m-0 justify-content-start">
            <app-inventory-filter class = "filter"></app-inventory-filter>
            <div class = "filter-tab d-flex justify-content-center border border-dark border-2 py-2">Filter</div>
        </div>

        <!-- Column 2, Book List Column-->
        <div class="col-xl-4 col-lg-5 col-11 d-flex justify-content-lg-end justify-content-center bg-primary">
            <app-inventory-book-list class></app-inventory-book-list>
        </div>

        <!-- Column 3, Book Details Column-->
        <div class="col-xl-6 col-lg-6 d-none d-lg-block d-flex justify-content-start bg-secondary" style = "height: 100dvh;">
            <div class = "position-fixed mx-auto">
                <app-inventory-book-details></app-inventory-book-details>
            </div>
        </div>

    </div>
</div>

inventory-page.component.css #

.filter {
   display: none !important; /* 暂未实现折叠面板和标签页切换逻辑，测试响应式时先隐藏折叠面板 */
} 

.filter-tab {
    background-color: #ff6b6b;
    border-left: none !important;
    cursor: pointer;
} 

.filter-tab:hover {
    background-color: #cc5959;
}

inventory-book-list.component.html #

<div class = "book-block container-lg" *ngFor = "let book of bookList">
    <p class = "title pt-2 mb-0 fs-3">{{ book.title }}</p>
    <p class = "author m-0">Author: {{ book.author }}</p>
    <p class = "genre">Genre: {{ book.genre }}</p>
    <p class = "description"> {{ book.description }}</p>
    <p class = "pages m-0">Pages: {{ book.pages }}</p>
    <p class = "availability pb-3">Availability: {{ book.availability }} <br></p>
</div>

<!-- 问题根源 -->
<!-- 动态分页实现前的占位代码 -->
<nav aria-label="Page navigation example">
    <ul class="pagination d-flex justify-content-center">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">7</a></li>
      <li class="page-item"><a class="page-link" href="#">8</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
<!-- 问题根源 -->

inventory-book-list.component.css #

.book-block {
    max-width: 500px;
    box-sizing: border-box;
}

.book-block:hover {
    background-color: #d9d9d9;
    /* border-left: 3px solid #ff6b6b; */
}

问题根源 #

已定位问题出在分页组件：该组件整体宽度超出第二列的可视范围，限制了列内容的自适应压缩，导致1200px-1310px宽度区间内，第二列无法正常收缩，进而与第一列重叠。

解决方案 #

针对分页组件做响应式适配，可采用以下几种方式：

1. 添加水平滚动容器
   给分页组件外层包裹overflow-x-auto容器，宽度不足时允许横向滚动，避免溢出：

   <div class="overflow-x-auto">
       <nav aria-label="Page navigation example">
           <ul class="pagination d-flex justify-content-center">
               <!-- 分页项 -->
           </ul>
       </nav>
   </div>
   

2. 缩小分页项尺寸
   使用Bootstrap文本类或自定义CSS减少分页项的内边距和字体大小：

   .pagination .page-link {
       padding: 0.3rem 0.6rem;
       font-size: 0.9rem;
   }
   

3. 动态隐藏部分页码
   在中等屏幕区间（md到xl）隐藏中间冗余页码，仅保留首尾和当前页附近的项：

   <li class="page-item d-none d-xl-block"><a class="page-link" href="#">4</a></li>
   <li class="page-item d-none d-xl-block"><a class="page-link" href="#">5</a></li>
   

内容的提问来源于stack exchange，提问作者Predict