包含 3 列的引导网格无法正确呈现

问：

我有一个简单的 bootstrap-4 3 列网格。我希望中间的列是最宽的，但是它错误地呈现了列中的内容，并且输入的 innr 容器非常薄。当我调整中心列的类时，左列会按预期变小，但中间的容器仍然很薄，无法正确呈现。我希望容器和中心列中的输入继承指定的宽度，例如.class=“col-8”。见下文

<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 style="text-align: left;">title</p>
   </h2>
   <br><br>
   <h6 class="font-italic">
      <span style="padding-left: 15px;">
      <a href="{{ summary['url'] }}" 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 style="text-align: center;">
      <div style="display: inline-block; text-align: justify;">
         <div class="container-fluid border pt-3 full-page justify-content-center" id="con-result">
            <pre><div id="result"></div></pre>
         </div>
         <br>
         <div>
            <input class="col-md-9" id="input_text" name="input_text" placeholder="Enter a prompt here">
            <br>
         </div>
         <br><br><br>
      </div>
   </div>
</div>
<div class="col">
    some text
</div>
</div>
</div>

CSS：

.full-page {
    height: 58vh;
    overflow-y: scroll;
    border-radius: 20px;
}

任何帮助都会很棒，谢谢！

这是一个演示