gpt4 book ai didi

html - 附加图像时如何使边框在 Bootstrap 的输入组中保持一致?

转载 作者:行者123 更新时间:2023-12-03 18:18:11 25 4
gpt4 key购买 nike

我想在导航栏中创建一个搜索框,我得到了这样的效果:

search box with bad border

所以我的问题是我无法使边框保持一致 - 我希望图标与“搜索...”框具有相同的边框,并且它们之间没有边框。

它的代码如下所示:

<div class="input-group" style="width: 10rem;">
<input type="search" placeholder="Search..." aria-describedby="button-addon5" class="form-control">
<div class="input-group-append">
<button id="button-addon5" type="submit" class="btn" style="background-color: White;">
<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color: rgb(230,0,0);">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd"/>
</svg>
</button>
</div>

我最接近解决它的方法是查找 bootstrap 的 css 并将边框属性复制到按钮元素,然后将 border-left 设置为无,但是尽管没有左边框,但圆 Angular 还是可见的问题。即使可以删除左边的 Angular ,我觉得一定有更好的方法......:/

最佳答案

在按钮上使用边框工具...

   <div class="input-group" style="width: 10rem;">
<input type="search" placeholder="Search..." aria-describedby="button-addon5" class="form-control">
<div class="input-group-append">
<button id="button-addon5" type="submit" class="btn border-left-0 border" style="background-color: White;">
<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color: rgb(230,0,0);">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>

演示:https://codeply.com/p/wLgphISgj2

关于html - 附加图像时如何使边框在 Bootstrap 的输入组中保持一致?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60773319/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com