解决Bootstrap网页文本输入框输入时视图抖动问题

#trackingInput {
    font-size: 16px; /* 明确指定字体大小，保持一致 */
    width: 100%;     /* 使输入框填充其父容器的可用宽度 */
    max-width: 400px; /* 设置最大宽度，防止过宽 */
    box-sizing: border-box; /* 确保内边距和边框包含在元素的指定宽度内 */
    padding: 8px 12px; /* 统一内边距 */
    border: 1px solid #ccc; /* 统一边框 */
}

<!-- 原始HTML中可能存在的align属性示例： -->
<!-- <div class="content" align="center"> -->
<!-- <div id="recentlyScannedHeader" align="left"> -->
<!-- <div id="lastScannedContent" align="center"> -->

<!-- 修改后的HTML (移除所有align属性) -->
<div class="content">
    <div class="row">
        <div id="recentlyScannedWindow" class="col-md-6"> <!-- 示例：添加Bootstrap col类 -->
            <div id="recentlyScannedHeader">
                <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>
        <div id="lastScannedWindow" class="col-md-6"> <!-- 示例：添加Bootstrap col类 -->
            <div id="lastScannedHeader">
                <h3>Most recent scan</h3>
            </div>
            <div id="lastScannedContent">
                <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>

/* 针对 .content div 的居中 */
.content {
    margin-left: auto;
    margin-right: auto;
    /* 或者如果需要Flexbox居中，请参考下一节 */
}

/* 针对标题和内容的对齐 */
#recentlyScannedHeader,
#lastScannedHeader {
    text-align: left; /* 对应原 align="left" */
}

#lastScannedContent {
    text-align: center; /* 对应原 align="center" */
}

.content {
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 示例：如果希望内容垂直堆叠 */
    align-items: center; /* 垂直方向（或主轴垂直时为水平方向）居中子元素 */
    justify-content: center; /* 水平方向（或主轴垂直时为垂直方向）居中子元素 */
    width: 100%; /* 设置内容区域宽度为视口宽度的100% */
    min-width: 320px; /* 设置最小宽度，防止在小屏幕下内容挤压 */
    max-width: 1200px; /* 设置最大宽度，防止在大屏幕下内容过宽 */
    margin: 0 auto; /* 水平居中 */
}

/* 确保 Bootstrap 的 .row 在 Flex 容器内行为正常 */
.row {
    display: flex; /* 确保行也是 Flex 容器 */
    flex-wrap: wrap; /* 允许子元素换行 */
    width: 100%; /* 确保行占据可用宽度 */
    /* Bootstrap 的 .row 默认就是 display: flex */
}

/* 针对具体的 col div 设置固定宽度或 flex 比例 */
/* 假设在HTML中使用了 col-md-6 */
.col-md-6 {
    /* Bootstrap 默认会处理这些，但如果需要更严格控制，可以覆盖 */
    /* flex: 0 0 50%; */ /* 固定为父容器的50%宽度 */
    /* max-width: 50%; */
    box-sizing: border-box;
    padding: 15px; /* 添加内边距 */
}

/* 如果不使用 Bootstrap 的 col 类，直接对 id 进行 flex 布局 */
#recentlyScannedWindow,
#lastScannedWindow {
    flex: 1; /* 让它们平均分配可用空间 */
    /* 或者设置固定宽度，例如 width: 50%; */
    min-width: 300px; /* 确保每个窗口有最小宽度 */
    box-sizing: border-box;
    padding: 15px;
}