показ ввода и кнопки в одном ряду на мобильном телефоне с начальной загрузкой

Question

Я хочу создать панель навигации, в которой есть элементы выбора, ввода и кнопки. я написал ниже код:

<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
        <form>
            <div class="row">
                <div class="col-md-3 pr-md-0">
                    <select class="form-control form-style-w3layout"
                            style="background: #011144; color: #fff" id="exampleFormControlSelect1">
                        <option>Deutsch - English</option>
                        <option>English- Deutsch</option>
                    </select>
                </div>
                <div class="form-row col-md-9 pl-md-0">
                    <div class="col-xs-10 col-md-10 pr-md-0">
                        <input type="text" class="form-control form-style-w3layout"
                               id="autocomplete" placeholder="Search Deutsch" required>
                    </div>
                    <div class="col-xs-2 col-md-2 pl-md-0">
                        <button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
                        </button>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>

ниже изображение выводится:

но в мобильном устройствеу меня проблемы. input и buttun показаны в двух разных строках. и нет никакого запаса между элементами выбора и ввода.

изображение ниже для мобильного устройства:

Answer 1

Вы можете использовать группу ввода в начальной загрузке

<nav class="navbar sticky-top navbar-light p-0">
  <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
      <form>
        <div class="row">
          <div class="col-md-3 pr-md-0 mb-3 mb-md-0">
            <select class="form-control form-style-w3layout" style="background: #011144; color: #fff"
              id="exampleFormControlSelect1">
              <option>Deutsch - English</option>
              <option>English- Deutsch</option>
            </select>
          </div>
          <div class="col-md-9 pl-md-0">
            <div class="input-group mb-3">
              <input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch"
                required>
              <div class="input-group-append">
                <button class="form-control form-style-w3layout-btn">
                  <span class="fa fa-search"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

Или, если вы хотите использовать систему сетки, вы можете сделать что-то вроде следующего, добавив еще одну строку элемент , обертывающий вокруг элементов, которые вы хотите иметь другую строку.

<nav class="navbar sticky-top navbar-light p-0">
  <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
      <form>
        <div class="row">
          <div class="col-md-3 pr-md-0 mb-3 mb-md-0">
            <select class="form-control form-style-w3layout" style="background: #011144; color: #fff"
              id="exampleFormControlSelect1">
              <option>Deutsch - English</option>
              <option>English- Deutsch</option>
            </select>
          </div>
          <div class="col-md-9 pl-md-0">
            <div class="row">
              <div class="col-10 col-md-6 pr-0">
                <input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch" required>
              </div>
              <div class="col-2 col-md-2 pl-0">
                <button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

Answer 2

Попробуйте это

<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
    <div class="col-md-8 mx-auto">
        <form>
        <div class="row">
          <div class="col-md-12 col-lg-4 p-0">
                    <select class="form-control form-style-w3layout"
                            style="background: #011144; color: #fff" id="exampleFormControlSelect1">
                        <option>Deutsch - English</option>
                        <option>English- Deutsch</option>
                    </select>
                </div>
          <div class="col-md-12 col-lg-6 p-0">
                <input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch" required>
              </div>
          <div class="col-md-12 col-lg-2 p-0">
                    <button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
                    </button>
                </div>

            </div>
        </form>
    </div>
</div>