在 Bootstrap 4 网格系统中，若中间列（如 col-8）内嵌套了 display: inline-block 的容器，会导致子元素无法正确继承列宽——输入框变窄、内容区域收缩。根本原因在于 inline-block 元素默认不占据父容器全部宽度，需显式设置宽度假或改用更合适的布局模式。
在 bootstrap 4 网格系统中，若中间列（如 `col-8`）内嵌套了 `display: inline-block` 的容器，会导致子元素无法正确继承列宽——输入框变窄、内容区域收缩。根本原因在于 `inline-block` 元素默认不占据父容器全部宽度，需显式设置宽度假或改用更合适的布局模式。
Bootstrap 4 的栅格系统依赖于 Flexbox 布局，其列（.col-*）本身是 flex-item，会自动按比例分配空间。但当在 .col-8 内部使用 <div style="display: inline-block; ..."> 时，该 inline-block 元素脱离了 Flex 上下文，不再响应父级 .col-8 的宽度约束，而是根据内容自适应宽度（通常极窄），导致内部 .container-fluid 和 <input> 无法展开。
✅ 正确做法：移除 inline-block，改用语义化、响应式的布局方式
推荐使用以下优化后的结构（已移除冗余样式，增强可维护性）：
<div class="container-fluid">
<div class="row">
<!-- 左侧列：等宽自适应 -->
<div class="col">
<br><br>
<h2 style="text-align: left;">title</h2>
<br><br>
<h6 class="font-italic">
<span style="padding-left: 15px;">
<a href="{{ summary['url'] }}" target="_blank" rel="noopener noreferrer" class="slink">summary</a>
</span>
</h6>
<p id="doc_summary"></p>
<span><a id="more|less" onclick="toggleText();" href="javascript:void(0);"></a></span>
</div>
<!-- 中间列：明确占 8/12 宽度 -->
<div class="col-8">
<!-- 移除 inline-block；使用 text-center + w-100 保证居中与宽度继承 -->
<div class="text-center w-100">
<!-- 直接使用 row/col 或纯 flex 容器，避免嵌套 container-fluid（易引发 padding/margin 冲突） -->
<div class="border pt-3 full-page mx-auto" id="con-result" style="max-width: 100%;">
<div id="result"></div>
</div>
<br>
<!-- 输入框使用 col-12 或 w-100，确保占满可用宽度 -->
<div class="w-100 d-flex justify-content-center">
<input class="form-control w-75" id="input_text" name="input_text" placeholder="Enter a prompt here">
</div>
<br><br><br>
</div>
</div>
<!-- 右侧列：等宽自适应 -->
<div class="col">
some text
</div>
</div>
</div>配套 CSS 保持简洁有效：
.full-page {
height: 58vh;
overflow-y: auto; /* 推荐用 auto 替代 scroll，避免无内容时出现空滚动条 */
border-radius: 20px;
}⚠️ 关键注意事项：
- ❌ 避免在 .col-* 内部嵌套 display: inline-block 或 float 元素——它们会破坏 Flex 布局流；
- ✅ 优先使用 Bootstrap 内置工具类（如 w-100, mx-auto, d-flex, justify-content-*）替代内联样式；
- ✅ <input> 不应直接加 col-md-9（它不是网格项），而应包裹在 div 中并应用 w-100 或配合 form-control 类；
- ✅ container-fluid 在 .col-* 内重复使用易导致水平溢出（因 .container-fluid 自带 padding-right: 15px），建议用 w-100 + mx-auto 替代。
通过以上调整，中间列将严格遵循 col-8 的宽度定义，其内部容器与表单控件均可自然撑满可用空间，实现预期的响应式三栏布局。
