Bootstrap 5列在Chrome调试面板中小屏尺寸下不响应问题求助

可能的原因及解决方案 #

1. 缺少Viewport元标签 #

Bootstrap响应式布局完全依赖viewport元标签，未添加时浏览器会以桌面端宽度渲染页面，直接导致调试移动视图时布局异常。

解决办法：在HTML的<head>标签中添加以下代码：

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

2. Row未包裹在容器组件内 #

Bootstrap的row必须放在.container或.container-fluid内部使用，否则row自带的负margin会引发布局偏移，调试模式下极易出现宽度不占满的情况。

修改后的代码示例：

<div class="container-fluid"> <!-- 也可根据需求使用.container -->
  <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button">Sign Up</button>
            </div>
          </div>
        </div>
  </div>
</div>

注：代码中简化了重复的col-sm-12，因为col-12已覆盖包括sm在内的所有小尺寸屏幕场景

3. Chrome调试工具设置异常 #

调试工具的设备模拟偶尔会出现缓存或缩放问题，可尝试：

• 点击调试工具右上角设置图标（⚙️），检查是否开启「自动调整缩放级别」
• 刷新页面（快捷键Ctrl+R），或关闭后重新打开设备工具栏

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