twitter-bootstrap - Bootstrap 4 : search input x clear search

Question

这个问题在这里已经有了答案:





Search input with an icon Bootstrap

(6 个回答)


去年关闭。




使用最新的 Bootstrap 4 ，我试图将 x 放入 search input 。

我可以简单地使用

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

但这在 Firefox 中不受支持...

我试过使用 addon 和 negative margins ，但不知何故， Bootstrap 隐藏了我的按钮......

<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>

如何让我的 x 按钮显示在正确对齐的输入框中？

Answer 1

我认为 input-group-addon是问题所在。
尝试这个:

<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>

这看起来像这样: