温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - How can I append 2 button to textarea and align them automatically using bootstrap?
css html user-interface twitter-bootstrap

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

发布于 2020-03-27 10:24:44

我想在文本区域的右侧添加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的大小来调整它们的大小?)所以有什么方法可以仅使用orignal bootstrap类来做到这一点?

查看更多

查看更多

提问者
Jason117
被浏览
284
Nandita Sharma 2019-07-03 19:26

d-flex flex-column#button-addon4div flex: 1 0 auto;使用,也可以在按钮上应用,以在增加textarea的高度时扩展按钮的高度。

.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>