html - 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 链接并禁用每个链接，同时检查问题是否已解决。一定是另一个规则干扰了它。