时间戳

首页 > 解决方案 > 如何将 2 个按钮附加到 textarea 并使用引导程序自动对齐它们？

html - 如何将 2 个按钮附加到 textarea 并使用引导程序自动对齐它们？

问题描述

我想在 textarea 的右侧添加 2 个按钮，一个在上面，另一个在它下面使用引导程序并自动对齐它们，是否可以仅使用原始引导程序类来实现？

使用https://getbootstrap.com/docs/4.3/components/input-group/显示示例，我可以编写如下代码：

<div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
    <div class="input-group-append" id="button-addon4">
        <button class="btn btn-outline-secondary" type="button">Button</button>
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
</div>

这表明： ss 但我希望它像： ss 并自动对齐它们（也许通过 textarea auto 的大小调整它们的大小？）那么有没有办法只使用原始引导类来完成它？

标签： htmlcsstwitter-bootstrapuser-interface

解决方案

d-flex flex-column当文本区域的高度增加时，在#button-addon4div上使用并flex: 1 0 auto;在按钮上应用以扩展按钮的高度。

.input-group-text,
.btn-outline-secondary {
  flex: 1 0 auto;
}
<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">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <div class="d-flex">
    <textarea class="form-control" aria-label="With textarea"></textarea>
    <div class="d-flex flex-column" id="button-addon4">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>


  <div class="input-group mt-4">
    <textarea class="form-control" aria-label="With textarea"></textarea>
    <div class="input-group-append d-flex flex-column">
      <span class="input-group-text">Button 1</span>
      <span class="input-group-text">Button 2</span>
    </div>
  </div>
</div>

推荐阅读