输入组内的 Bootstrap 按钮

Question

如何使它在输入相同高度的页面后很好地显示？

 <div class="input-group">
        <input type="text" class="form-control"/>
        <button class="input-group-addon" type="submit">
            <i class="fa fa-search"></i>
        </button>
</div>

这是代码 http://jsfiddle.net/6mcxdjdr/ 第一个是原始输入组，第二个是我想要的

原文由 Boris Kozarac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您遵循 bootstrap 的文档：

 <div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
        <i class="fa fa-search"></i>
    </button>
  </span>
</div>

原文由 Stephen Zeng 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Bootstrap 4 提供类 input-group-prepend 和 input-group-append 允许按钮内部输入的效果。

在输入组内 左 对齐按钮的片段下方（类 input-group-prepend ）：

 @import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

 <div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Prepended button</button>
  </div>
  <input type="text" class="form-control">
</div>

以及输入组内 右 对齐按钮的片段（类 input-group-append ）：

 @import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

 <div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

原文由 francisco neto 发布，翻译遵循 CC BY-SA 4.0 许可协议