html - Bootstrap 输入组插件

Question

我在使用 input-group-addon 类时遇到问题:我的 html 代码是由 JavaScript 生成的，我在我的各个页面中以相同的结构生成它。

但是，在一个页面中，它有效，而在另一个页面中，它不起作用。我不明白为什么!

工作时:

如果不是:

这是html代码:

<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon input-sm">
      <span class="glyphicon glyphicon-search"></span>
    </div>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter">
  </div>
</div>

您知道为什么它不起作用吗？

感谢您的帮助!

Answer 1

由于我们看不到您的额外样式，因此很难判断问题出在哪里，但您的“html”中至少有两处可能会导致问题。

首先

您已使用 input-group-addon 将 input-sm 类添加到 div 中。 input-sm 类应该放在 div 上，input-group 类作为 Bootstrap 文档状态:

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

第二

默认情况下，div 元素具有 block 的 display 属性，除非您将其更改为其他内容，而 input -group-addon 和其他几个 Bootstrap form 和 input 类具有 display 属性 表格单元格。我可以重现您的 input-group 奇怪格式的唯一方法是将某些相关类的 display 属性更改为 block。

这是一个例子:

.input-group-addon.input-sm {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon input-sm">
      <span class="glyphicon glyphicon-search"></span>
    </div>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter" />
  </div>
</div>

因此，长话短说，您可能需要像这样构建您的 html:

/*****************************************
  Do not change the display property
  of any of these classes to block.

  .input-group
  .form-control
  .input-group-addon
  .input-group-btn

  the default display value of these
  classes is table-cell.
******************************************/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group input-sm">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
    </span>
    <input id="kwtab_fieldfilter" class="form-control input-sm" type="text" placeholder="Filter" />
  </div>
</div>

希望这对您有所帮助。