具有 3 列的 Bootstrap 网格无法正确渲染

Question

我有一个简单的 bootstrap-4 3 列网格。我希望中间的列是最宽的，但是它会错误地渲染列中的内容，并且输入的 innr 容器非常薄。当我调整中心列的类时，左列按预期变小，但中心的容器仍然很薄并且无法正确渲染。我希望容器和中心列中的输入继承指定的宽度，例如类=“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'] }}" 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 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;
}

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

这是一个演示

Answer 1

让我们看看这部分代码：

你有

<div style="display: inline-block; text-align: justify;">

inline-block 允许设置元素的宽度和高度。也就是说，您可以将显示更改为其他内容（例如网格），或者在该 div 元素上设置 100% 的宽度。如果我正确理解了这个问题，这应该会给你你想要的输出。