Bootstrap页面输入文本时视图抖动问题求助

触发原因 #

1. 栅格系统未正确使用：你的row下的两个内容div没有添加Bootstrap的col类，栅格布局依赖row+col的组合来固定宽度分配，缺少col会导致容器宽度随内容变化，输入长文本时输入框撑大父容器，引发页面横向尺寸波动。
2. 输入框无宽度约束：文本输入框默认会根据内容长度自适应宽度，当输入内容过长时，会超出容器范围，触发页面水平滚动条的显示/隐藏，直接导致布局抖动。
3. 缺少外层容器：Bootstrap的row需要嵌套在container或container-fluid内，否则row的负margin会导致页面横向溢出，进一步加剧尺寸波动问题。

解决步骤 #

1. 完善栅格结构 #

给recentlyScannedWindow和lastScannedWindow添加col类，比如col-12 col-md-6，实现移动端上下排列、桌面端平分屏幕宽度的布局，同时固定宽度分配。

2. 限制输入框宽度 #

给输入框添加Bootstrap的w-100类，让它占满父容器宽度，避免内容撑大容器；也可自定义固定宽度（如style="width: 300px;"）。

3. 补全外层容器 #

把原content容器替换为container-fluid（或container），确保row在正确的容器内，消除负margin带来的溢出问题。

修改后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div class="container-fluid" align="center">
    <div class="row">
        <!-- 最近扫描的追踪号码列表 -->
        <div id="recentlyScannedWindow" class="col-12 col-md-6">
            <div id="recentlyScannedHeader" align="left">
                <h3>Scan log</h3>
            </div>
            <div id="scanLog">
            </div>
            <div id="barcodeInputField">
                <form action="##" onsubmit="submitTracking();return false">
                    <input id="trackingInput" type="text" placeholder="Enter a barcode here" autofocus class="w-100">
                    <input type="submit" style="visibility : hidden;">
                </form>
            </div>
        </div>
        <!-- 显示最后扫描的追踪号码及相关消息/通知 -->
        <div id="lastScannedWindow" class="col-12 col-md-6">
            <div id="lastScannedHeader" align="left">
                <h3>Most recent scan</h3>
            </div>
            <div id="lastScannedContent" align="center">
                <span id="mostRecentlyScannedNumber">Tracking number here</span>
                <br>
                <span id="mostRecentlyScannedCarrier">Carrier here</span>
                <br>
                <br>
                <h2 id="mostRecentlyScannedMessage">Messages and notifications here</h2>
            </div>
        </div>
    </div>
</div>

额外优化建议 #

• 若不希望输入框内容换行，可给输入框添加text-nowrap类，并设置style="overflow-x: auto;"，让内容可横向滚动但不撑大容器。
• 给scanLog和lastScannedContent设置固定高度（如style="height: 300px;"）和overflow-y: auto，避免内容过多时撑大容器高度影响布局。

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