使用带有圆形文本框的Bootstrap 4图标搜索输入 [英] Search input with an icon Bootstrap 4 with rounded textbox
本文介绍了使用带有圆形文本框的Bootstrap 4图标搜索输入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要带有搜索图标的圆角边框搜索框.
I want rounded border search box with search icon.
下面的代码可以工作,但是如果我将四舍五入"分类,则图标会与文本框分开.
Below code works but if I class "rounded-pill" then icon separates from textbox.
当图标也保留在其中时,如何使文本框变圆.
How can I make textbox round while icon also remains within.
<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的解决方案...
Here's a Bootstrap only solution...
使用负利润率工具将按钮向左滑动:
<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
方法起作用:/p>
This also works using input-group-text
, or using the grid col-auto
method explained in my other answer:
<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
这篇关于使用带有圆形文本框的Bootstrap 4图标搜索输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文