Angular14+Bootstrap5页面移动端无法适配表格宽度问题求助

1. 修复Navbar竖屏宽度不足问题 #

核心原因是缺少移动端视口配置，移动设备默认会以桌面端宽度渲染页面，导致竖屏时元素宽度适配异常。

打开项目根目录的index.html，在<head>标签内添加以下视口元标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

该配置会让页面宽度自动匹配设备屏幕宽度，直接解决竖屏时Navbar宽度不足的问题。

2. 修复表格移动端自适应问题 #

Bootstrap提供了响应式表格容器类，只需将表格包裹在table-responsive容器中，小屏幕下会自动生成横向滚动条，同时保证表格布局正常。

修改后的表格部分代码如下：

<div class="container-fluid">
  <h2>Hello Bootstrap 5</h2>

  <!-- 添加table-responsive容器包裹表格 -->
  <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead>
        <th>Name</th>
        <th>Last name</th>
        <th>Nickname</th>
        <th>Bool 1</th>
        <th>Bool 2</th>
        <th>Bool 3</th>
      </thead>
      <tbody>
        <tr *ngFor="let person of people">
          <td>{{person.firstName}}</td>
          <td>{{person.lastName | uppercase}}</td>
          <td>{{person.nickname}}</td>
          <td>{{person.boolean1}}</td>
          <td>{{person.boolean2}}</td>
          <td>{{person.boolean3}}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6"><strong>Lorem ipsum dolor sit amet.</strong></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

补充说明 #

• 若只想在小屏幕（如sm断点以下）启用表格滚动，可替换为table-responsive-sm，大屏下表格会自动铺满容器，无多余滚动条。
• 确保项目已正确引入Bootstrap 5.x版本的CSS文件，避免类名兼容问题。

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