我有一个使用bootstrap的网页。在此网页上，每当我在文本字段中键入字符时，页面的水平大小都会波动。我希望在页面上的任何div的大小没有变化，当一个字符被输入到一个文本字段，我很好奇是什么可能会触发这样的行为。
我已经尝试限制文本字段的宽度，但没有工作。
我减少了页面上的两个div的大小，以不填满页面，这是有效的，但是在文本字段中输入更多字符时，页脚的大小仍然会波动。此外，我希望能够让我的两个主要div(行div中的coldiv)组合占用整个屏幕的宽度，所以这不是我觉得我可以继续追求的东西。
我也试过将coldiv放在彼此的顶部(通过从它们中删除colclass)，这也可以阻止视图的晃动，但这是不可取的，因为我需要能够在不滚动的情况下完整地查看这两个div。
任何帮助都是感激的。谢谢:)
<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="content" align="center">
<div class="row">
<!---List of recently scanned tracking numbers--->
<div id="recentlyScannedWindow" class="">
<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>
<input type="submit" style="visibility : hidden;">
</form>
</div>
</div>
<!--- Shows the tracking number that was last scanned and any messages/notifications related to it--->
<div id="lastScannedWindow" class="">
<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>我希望其中一个能起作用:
1。尝试降低文本字段
中使用的字体大小2。试着移除"对齐"属性，因为它会覆盖CSS文件中的属性…
3。尝试给内容添加div
display: flex
align-items: center
justify-content:center
也可以尝试添加一个特定的宽度和高度，如果你使用百分比
效果会更好width=50%