将按钮附加到输入组的底部

Question

引导程序中是否有一种方法可以将按钮附加到输入/文本区域的底部
而不是附加到右侧/左侧？

这是我尝试过的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <textarea class="form-control" rows="10" placeholder="Type your notes here..." required></textarea>
  <div class="input-group-append">
    <button class="btn btn-primary">Button</button>
  </div>
</div>

这是我要实现的目标：

Answer 1

使用w-100

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <textarea class="form-control w-100" rows="10" placeholder="Type your notes here..." required></textarea>
  <div class="input-group-append w-100">
    <button class="btn btn-primary w-100">Button</button>
  </div>
</div>

Answer 2

似乎引导程序没有这样的功能（或者至少没有充分的文献证明可以找到它）。
因此，添加2个简单的类来解决边界舍入效果很好。

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  width: 100%;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <textarea class="form-control rounded-bottom-0"
            rows="10"
            placeholder="Type your notes here..."
            required></textarea>
  <button class="btn btn-primary rounded-top-0">Copy to clipboard</button>
<div>

注释：

1. 从CSS删除!important-s适用于Chrome，但不适用于Firefox。
2. Bootstrap的border-rounding类在那里也无法正常运行，因为边界已经被弄圆，并且bootstrap没有用于从侧面重置回合的类。