如何让Font Awesome图标与输入控件在表格表头同行显示？

问题出在你没用到Bootstrap专门的输入组组件来整合输入框和图标，form-control默认是块级元素，会占满父容器宽度，导致图标被挤到下一行。

直接用Bootstrap的input-group组件重构表头里的搜索框结构就能解决，修正后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<table class="table table-bordered table-responsive-md table-striped text-left">
  <thead>
    <tr>
      <th>
        <div class="input-group">
          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <span class="input-group-text">
              <i class="fas fa-search" aria-hidden="true"></i>
            </span>
          </div>
        </div>
      </th>
    </tr>
  </thead>
</table>

关键修改说明： #

• 用div.input-group作为容器包裹输入框和图标元素，Bootstrap会自动处理内部元素的布局，让它们同行显示
• 把原来的input-group-addon换成input-group-text，并放在input-group-append容器里（如果想把图标放在输入框左侧，就用input-group-prepend）
• 移除了输入框上重复的fas fa-search类（这个类是给图标用的，输入框不需要）

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