我想要带有搜索图标的圆形边框搜索框。
下面的代码有效，但如果我将其分类为“rounded-pill”，则图标将与文本框分开。
如何使文本框变圆，同时图标也保留在其中。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
这是一个仅 Bootstrap 的解决方案......
Use the 负保证金效用将按钮向左滑动：
<div class="input-group">
<input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
这也可以使用input-group-text，或使用网格col-auto方法解释于我的另一个答案 https://stackoverflow.com/a/45696757/171456:
<div class="row no-gutters mt-3 align-items-center">
<div class="col-4">
<input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
</div>
<div class="col-auto">
<button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
https://www.codeply.com/go/cDQQcNY8kP https://www.codeply.com/go/cDQQcNY8kP
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
