我想要带有搜索图标的圆角边框搜索框。
下面的代码有效，但如果我将“四舍五入”分类，则图标与文本框分离。
当图标也保留在其中时，如何使文本框变圆。
<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>
答案 0 :(得分：1)
我不确定100％，但是根据我的研究，Bootstrap 4.3.1（今天的最新版本）不允许仅使用预定义的Bootstrap类来获得所需的内容。
这是一个示例，其中包含一些CSS类，您可以将它们包含在代码中，并使您获得所需的结果。查看代码段！
/* Rounded pill classes for horizontal sides */
.rounded-pill-left {
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
}
.rounded-pill-right {
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
}
/* Another classes to use */
.rounded-t-l-0 {
border-top-left-radius: 0 !important;
}
.rounded-t-r-0 {
border-top-right-radius: 0 !important;
}
.rounded-b-l-0 {
border-bottom-left-radius: 0 !important;
}
.rounded-b-r-0 {
border-bottom-right-radius: 0 !important;
}
.rounded-x-l-0 {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.rounded-x-r-0 {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}<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 border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
这是仅适用于Bootstrap的解决方案...
使用负利润率工具将按钮向左滑动：
<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或my other answer中介绍的网格col-auto方法来实现：
<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>