如果未用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网格布局的一部分
最佳答案
您的代码已经在一行中显示该表单。
检查您的css链接并禁用每个链接,同时检查问题是否已解决。另一个规则必须干扰它。
关于html - Bootstrap 4 input-group-append无法与CSS GRID一起使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50895927/