如何在Angular 4+Bootstrap 4中为标签右侧添加搜索图标？

嘿，我看你正在尝试给Location Id的输入框末尾加搜索图标，你的代码结构有点小问题——Bootstrap的input-group组件需要特定的嵌套结构才能让按钮和输入框无缝对齐。

问题分析 #

你当前的代码里，<input>和<span class="input-group-btn">没有被包裹在input-group容器中，这会导致按钮没法和输入框合并成一个视觉整体，自然达不到你想要的效果。

修正后的代码 #

下面是调整后的完整代码，我帮你把结构理顺了：

<div class="row">
  <div class="form-group col-lg-2"></div>
  <div class="form-group col-lg-4">
    <label class="Bold">Location Id </label>
    <!-- 新增input-group容器，把输入框和按钮包起来 -->
    <div class="input-group">
      <input type="text" class="form-control" name="LocationId" >
      <span class="input-group-btn">
        <button class="btn btn-info btn-md" type="button">
          <i class="fa fa-search"></i>
        </button>
      </span>
    </div>
  </div>
</div>

额外提示 #

1. 确保你已经引入了Font Awesome资源（因为用到了fa fa-search图标），如果还没引，可以在项目的index.html里添加对应的CSS链接，或者通过npm安装后在样式文件中导入。
2. 如果你用的是Angular的模板驱动表单或响应式表单，可以给input加上[(ngModel)]或formControl绑定，这样就能在组件逻辑里轻松获取输入值啦。

内容的提问来源于stack exchange，提问作者Ben