如何避免右侧列内容高度变化影响左侧输入容器位置？

问题根源 #

你的布局存在两个核心问题：

• 网格列宽总和超过Bootstrap的12列限制（col-md-3 + col-md-3 + col-md-9 = 15），导致md及以上屏幕下输入容器被挤到下一行，右侧容器高度增加时会把它向下推。
• 使用position-absolute会让输入容器脱离文档流，容易被其他元素覆盖，导致点击区域和视觉位置错位，出现提交后控件无法使用的情况。

修复方案 #

用Bootstrap自带的粘性定位（sticky）替代绝对定位，同时修正网格列宽，确保布局符合12列规则：

1. 修正网格列宽：将第三个容器的col-md-9改为col-md-6，让列宽总和为12（3+3+6），保证md及以上屏幕三列能在同一行排列。
2. 替换定位方式：移除输入容器的position-absolute，添加position-sticky和top-0，让输入容器固定在当前列的顶部，不会随右侧容器高度变化而移位，同时保持在文档流中，避免点击错位。
3. 保留移动端顺序：原有的order类可以保留，确保移动端显示顺序正确。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <!-- First container -->
    <div class="col-12 col-md-3 order-1 order-md-0">
      <div class="card text-center">
        <h2>Car Park Number</h2>
      </div>
    </div>
    <!-- 2nd container with sticky positioning -->
    <div class="col-12 col-md-3 input-container order-2 position-sticky top-0 mb-5">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Enter Car Park Number Prefix:</h5>
          <textarea class="form-control" id="carParkNumberInput" rows="3" placeholder="Enter prefix (e.g. TY)" oninput="validateInputForPrefix(this)"></textarea>
          <button class="btn btn-primary ripple mt-3" id="submitPrefixBtn">Submit</button>
        </div>
      </div>
    </div>
    <!-- 3rd container (fixed column width) -->
    <div class="col-12 col-md-6 order-0 order-md-1">
      <div class="card custom-height-card">
        <div class="card-body">
          <div id="yourContainerId" class="row"></div>
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

• 如果需要输入容器在移动端也固定在顶部，只需保留position-sticky top-0即可，它会在所有屏幕尺寸下生效。
• 若输入容器的父列高度不足，粘性定位会失效，可通过自定义CSS设置min-height: 100vh让父列占满视口高度。

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