Bootstrap 4三列网格渲染异常：中间列内容未继承列宽

问题原因 #

中间列（col-8）内部元素未正确继承宽度，核心问题有两个：

• 中间列内嵌套了display: inline-block的容器，该元素会随内容自动收缩宽度，无法占满父级col-8的可用空间
• 输入框使用col-md-9类，但父容器未添加row类，导致Bootstrap栅格列规则失效

修复方案 #

1. 移除限制宽度的inline-block容器，改用Bootstrap内置类实现文本对齐
2. 给输入框的父容器添加row类，配合col-md-*类实现正确宽度占比
3. 用Bootstrap工具类替代内联样式，保持代码一致性

修改后的完整代码 #

HTML部分

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <br><br>
      <h2>
        <p class="text-left">title</p>
      </h2>
      <br><br>
      <h6 class="font-italic">
        <span class="pl-3">
          <a href="{{ summary['url'] }}" target="_blank" rel="noopener noreferrer" class="slink">summary </a>
        </span>
      </h6>
      <pre><p id="doc_summary"></p></pre>
      <span><a id="more|less" onclick="toggleText();" href="javascript:void(0);"></a></span>
    </div>
    <div class="col-8">
      <div class="text-center">
        <div class="container-fluid border pt-3 full-page" id="con-result">
          <pre><div id="result"></div></pre>
        </div>
        <br>
        <div class="row justify-content-center">
          <input class="col-md-9" 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: scroll;
    border-radius: 20px;
}

关键修改点说明 #

• 移除中间列内的display: inline-block容器，直接用text-center类实现内容居中
• 输入框父容器添加row justify-content-center，既满足栅格布局要求，又实现输入框居中显示
• 用Bootstrap的text-left和pl-3工具类替代内联的文本对齐、内边距样式，符合框架规范

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