Twitter bootstrap 引导4：搜索输入x清除搜索

使用最新的

bootstrap4

，我试图在

搜索输入中输入一个x

我可以用

<input type="search" placeholder="Search..." />

我怎样才能让我的x按钮显示在输入框内并正确对齐？
它将与输入框相同

使用输入组并调整边框

  <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-times"></i>
            </button>
        </span>
  </div>

  <div class="row no-gutters">
        <div class="col">
            <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
                <i class="fa fa-times"></i>
            </button>
        </div>
  </div>



使用按钮上的相对位置

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
        <div class="input-group-addon">
          <button class="btn bg-transparent">
            <i class="fa fa-times"></i>
          </button>
        </div>
</div>

 <div class="d-flex">
     <input class="form-control py-2 bg-transparent" type="search" value="search" id="example-search-input">
     <button class="btn btn-outline-secondary border-0 btn-pos" type="button">
         <i class="fa fa-times"></i>
     </button>
 </div>

 .btn-pos {
    position:relative;
    z-index:1;
    left: -36px;
 }


.btn位置{
位置：相对位置；
z指数：1；
左-36px；
}

使用带列的行并调整边框

  <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-times"></i>
            </button>
        </span>
  </div>

  <div class="row no-gutters">
        <div class="col">
            <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
                <i class="fa fa-times"></i>
            </button>
        </div>
  </div>



引导程序文档中有一个示例，您可以对其进行调整：

e、 g


X
我认为
输入组插件是问题所在

试试这个：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
    <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>



这看起来像这样：

我无法编辑响应，但请注意不要将
type=“button”
属性添加到按钮。当您在键盘上点击
Enter
时，该按钮将被“隐式”单击，至少在
元素内部的情况下是这样。谢谢您的提示。我编辑了答案。当我将此代码粘贴到我的页面（在Chrome 89.0.4389.90（官方版本）（x86_64）中呈现）时，没有
x
，尽管当我检查它时有一些东西。
x
从哪里来？是否在最终用户类
fa-fa-times
中？我也试过
，但没有更好的效果。
fa-fa-times
是来自font awesome的类，更具体地说。最简单的方法是使用CDN链接导入它。尝试将以下行添加到
部分：
。有关更多信息，请查看。