Bootstrap动态高度容器，在容器底部有文本输入

Question

我正在使用 bootstrap 4。我正在尝试创建一个类似于 Google 的 Bard 的桌面聊天机器人。这将使用一个与屏幕高度相同的容器，文本输入位于容器的底部。当用户输入和响应对于容器来说太大时，容器也会有一个滚动条，但文本输入将始终位于底部。

我试过这个：

.col-md-9 {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: flex-end;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.full-page {
  height: 100vh;
  overflow-y: scroll;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div style="text-align: center;">
  <div style="display: inline-block; text-align: justify;">

    The UK Supreme Court has been hearing an appeal from PACCAR Inc and others against the Competition Appeal Tribunal and others. The case revolves around the legality and effectiveness of third-party litigation funding arrangements. The key issue is the
    interpretation of a statutory definition, specifically whether litigation funding agreements (LFAs) that entitle the funder to a percentage of any

    <div class="container-fluid border pt-3" style="full-page">
      <pre><div id="result"></div></pre>
      <div class="col-md-9">
        <textarea id="input_text" name="input_text" placeholder="Enter a prompt here"></textarea>
        <br />

        <button type="submit" id="submit-btn" name="submit-btn" value="{{ summary['id'] }}" class="btn btn-primary float-right">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="spinner" style="display: none"></span>
      
      Submit</button>
      </div>

      <br><br><br>
    </div>

  </div>
</div>

我也尝试过使用

<div class="fixed-bottom">...</div>

但这会在屏幕上端到端地输入文本。我可以使用它，但是我该如何定制它呢？我真的只是想复制吟游诗人

到目前为止我的问题：

容器没有扩展到屏幕的高度。
我无法让文本输入位于容器底部且宽度等于容器。

Answer 1

您当前正在样式属性中调用“full-page”类。如果将此类移至 div 元素上的 class 属性，您将能够看到类样式生效。

.col-md-9 {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: flex-end;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.full-page {
  height: 100vh;
  overflow-y: scroll;
}

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

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

      The UK Supreme Court has been hearing an appeal from PACCAR Inc and others against the Competition Appeal Tribunal and others. The case revolves around the legality and effectiveness of third-party litigation funding arrangements. The key issue is the
      interpretation of a statutory definition, specifically whether litigation funding agreements (LFAs) that entitle the funder to a percentage of any

      <div class="container-fluid border pt-3 full-page">
        <pre><div id="result"></div></pre>
        <div class="col-md-9">
          <textarea id="input_text" name="input_text" placeholder="Enter a prompt here"></textarea>
          <br />

          <button type="submit" id="submit-btn" name="submit-btn" value="{{ summary['id'] }}" class="btn btn-primary float-right">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="spinner" style="display: none"></span>
      
      Submit</button>
        </div>

        <br><br><br>
      </div>

    </div>
  </div>
</body>
<html>

Bootstrap动态高度容器，在容器底部有文本输入

问题描述投票：0回答：1

1个回答

最新问题

Bootstrap动态高度容器，在容器底部有文本输入

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1