Показать строку поиска и кнопку поиска в строке с CSS

Question

Я создаю небольшой сайт ( ссылка ), который отображает панель поиска на панели навигации. Я использую Bootstrap 4 для элементов управления панели навигации и Algolia Places для панели поиска HTML элемент ввода. Проблема в том, что я не могу выровнять панель поиска по кнопке поиска, хотя я использую form-inline. Кроме того, результаты поиска, отображаемые при наборе текста в строке поиска, обрезаются.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a href="/" class="navbar-brand">Drinking Fountains</a>

  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span> 
  </button>

  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/">Map
          <span class="sr-only">(current)</span>
        </a>
      </li>  
      <li class="nav-item">
        <a class="nav-link" href="/faq">FAQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
    </ul>         

    <form class="form-inline my-2 my-lg-0">
      <input class="mr-sm-2"  id="address-bar" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
    </form>              
  </div>
</nav>

Answer 1

Убедитесь, что <button> равно display:inline-block. И ваш ввод имеет max-width:100% вместо width:100%.

Также ваш .ap-dropdown-menu не Z-проиндексирован должным образом над картой.

Answer 2

, используя Bootstrap:

, оберните <span> там, где находится поиск, и кнопку с <div class="d-flex"></div>, и добавьте к <span> class mr-2 для нужного вам места.

Должно быть что-то вроде этого:

<div class="d-flex"> <span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </div>

и

результат

Answer 3

#navbarMenu .form-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

... должен сделать свое дело.

или, используя Bootstrap flex служебные классы:

<form class="d-flex align-items-center flex-nowrap">

---

Но, чтобы также разрешить border-radius проблема, вы можете изменить разметку на:

<form class="form-inline my-2 my-lg-0">
  <div class="input-group">
    <input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
    <div class="input-group-append">
       <button class="btn btn-outline-light" type="submit">Search</button>
    </div>
  </div>
</form>