Question

对于最新的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 class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>

这看起来像这样：

Answer 2

它与methods explained here相同。

使用输入组并调整边框。

manip.setOnTouchListener(new View.OnTouchListener() {
  public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
      Layout layout = ((TextView) v).getLayout();
      int x = (int)event.getX();
      int y = (int)event.getY();
      if (layout!=null){
          int line = layout.getLineForVertical(y);
          int offset = layout.getOffsetForHorizontal(line, x);
           try{
              char texts = textView.getText().charAt(offset);
              Toast.makeText(MainActivity.this,"the offset are "+offset+"letter are "+texts,Toast.LENGTH_SHORT).show();
            }catch (Exception e){
              Toast.makeText(MainActivity.this,"the error are "+e,Toast.LENGTH_SHORT).show();
            }
          }
    }
    return true;
  }
});

使用按钮上的相对位置...

  <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="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;
}

https://www.codeply.com/go/SCMW5b1DKr

Answer 3

Bootstrap文档中有一个示例可供您修改：
https://getbootstrap.com/docs/4.1/components/input-group/#button-addons

例如

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">X</button>
  </div>
</div>

Bootstrap 4：搜索输入x清除搜索

3 个答案: