Bootstrap 4 input-group-append无法使用CSS GRID

Question

如果未使用display：grid

包装，则此剪辑可正常工作

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

如果用display：grid

包装的话

.wrapper{
    display: grid;
}



<div class="wrapper">
     <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
    </div>
   </div>

此输入显然是大型css网格布局的一部分

Answer 1

您的代码已经将表单显示在一行中。

浏览您的css链接并在检查问题是否已修复时禁用每个链接。另一条规则必须是干涉它。