Значок поиска находится ниже формы ввода - PullRequest
Новая
       3

Значок поиска находится ниже формы ввода

0 голосов
/ 10 марта 2020

Я делаю навигационную панель с окном поиска, используя Bootstrap, и у меня проблема с мобильным телефоном. При ширине экрана 576px или выше это выглядит так, как я хочу, но ниже значок поиска перемещается под ввод.

576px 576px

550px 550px

Есть идеи, почему это происходит и как это решить? Я пробовал несколько решений, и ничего не работает. У меня нет медиа-запросов ниже 576 пикселей. У меня только для максимальной ширины: 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>

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Я только что решил. Решение заключается в следующем:

  1. изменить в html d-block на d-flex
  2. add 
.mobile-border {
        justify-content: space-between;
        flex-flow: row nowrap;
}
и удалите float-right из mobile-search-icon
0 голосов
/ 10 марта 2020

Добавить: 

.mobile-form
 position: relative

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