搜索图标位于表单输入下方答案

【问题标题】：Search icon goes below form input搜索图标位于表单输入下方
【发布时间】：2026-01-20 01:15:01
【问题描述】：

我正在使用 Bootstrap 使用搜索框进行导航栏，但在移动设备上遇到问题。在屏幕宽度为 576 像素或以上时，它看起来像我想要的，但在下面，搜索图标在输入下方移动。

576 像素

550 像素

任何想法为什么会发生以及如何解决它？我尝试了几种解决方案，但没有任何效果。我没有任何低于 576 像素的媒体查询。我只有 max-width:992px。

body {
  background-color: black !important;
}

.mobile-form {
  border: none;
  color: #ffffff;
  background-color: #292935;
}

.mobile-border {
  border-bottom: 1px solid #ffffff;
  margin-left: 20px;
  margin-right: 20px;
}

.mobile-search-icon {
  float: right;
  margin-top: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">

<form class="form-inline d-block d-lg-none mobile-border">
  <input class="form-control mobile-form" type="search" placeholder="Search our site" aria-label="Search">
  <i class="fas fa-search text-white ml-3 mobile-search-icon" aria-hidden="true"></i>
</form>

【问题讨论】：

这能回答你的问题吗？ Bootstrap glyphicons appearing on the next line instead of at the end of an input element。另见Put search icon near textbox using bootstrap。简而言之，使用input group。
我现在检查了一下，它可以工作，但关键是将显示从块更改为 flex。

标签： html css bootstrap-4 responsive-design

【解决方案1】：

添加：

.mobile-form
 position: relative

.mobile-search-icon
 position: absolute
 right: 0
 top: 10px

【讨论】：

【解决方案2】：

我刚刚解决了。解决办法是：

将 html d-block 更改为 d-flex
添加

.mobile-border {
        justify-content: space-between;
        flex-flow: row nowrap;
}

并从 mobile-search-icon 中删除 float-right

【讨论】：