如何使用引导程序将按钮放置在 Textarea 旁边而没有任何空格

Question

我对 bootstrap 和 CSS 很陌生，所以我有点陷入其中一个问题。我尝试了这里提到的各种解决方法，但似乎没有一个对我有用，所以在这里发布。如果发现重复真的很抱歉。

我在我的应用程序中使用Bootstrap 5.0，我正在尝试创建TextArea，我想在它的左侧创建2个没有任何空格的按钮Textarea。

我假设由于引导程序的默认列间距，我得到了 button 和 textarea 之间的空格。我想删除这个。我知道我可以使用CSS 来删除它，但我想使用默认的Bootstrap 方式。

以下是我的代码：

  <div class="row">
    <div class="col-md-1  padding-0">
      <div class="row">
        <div class="col-md-3">
          <button class="btn btn-primary">Test1</button>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-3">
          <button class="btn btn-primary">Test2</button>
        </div>
      </div>
    </div>
    <div class="col-md-11  padding-0">
      <textarea class="form-control"></textarea>
    </div>
  </div>

我尝试了各种方法，例如 no-gutters 和 float-end，但似乎没有任何效果。谁能告诉我如何使用Bootstrap 实现这一目标？

以下是我拥有的当前页面（基于上面的代码，我目前拥有此页面）：

以下是我的目标（我希望我的 HTML 页面看起来像这样）：

Answer 1

你可以在没有 .row 和 .col 类的情况下做到这一点，并为此使用 flexbox

textarea {
 height: 200px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
<div class="d-flex p-5">    
  <div>
   <button class="btn btn-primary mb-2">Test1</button>       
    <br/>      
   <button class="btn btn-primary">Test2</button>
  </div>
  <textarea class="form-control"></textarea>
</div>

使用.row 和.col

textarea {
 height: 200px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row g-0 p-5">    
  <div class="col-auto">
   <button class="btn btn-primary mb-2">Test1</button>       
    <br/>      
   <button class="btn btn-primary">Test2</button>
  </div>
  <div class="col">
    <textarea class="form-control"></textarea>
  </div>
</div>