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

Question

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

576px

550px

知道为什么会发生以及如何解决吗？我尝试了几种解决方案，但没有任何效果。我没有任何低于 576px 的媒体查询。我只有 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>

Answer 1

添加：

.mobile-form
 position: relative

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

Answer 2

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

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

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

并从移动搜索图标中删除向右浮动

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

Search icon goes below form input

html

css

responsive-design

bootstrap-4