Как поместить тег <input>в дополнительный div в форме начальной загрузки 4?

Question

Представьте себе следующую простую форму:

<div class="d-flex justify-content-center" style="direction: ltr">
            <form class="form-inline flex-fill">
              <div class="input-group input-group-lg flex-fill mx-3">
                <input type="text" class="form-control form-control-lg text-center" placeholder="" />
                <div class="input-group-append">
                  <button type="button" class="btn btn-warning"><i class="fas fa-search text-muted"></i></button>
                </div>
              </div>
            </form>
          </div>

Если вы вставите элемент в дополнительный

, он не будет отображаться правильно.Нравится

Похоже, что стили начальной загрузки ожидают, что вход будет непосредственным потомком группы ввода.Как вы решаете это в начальной загрузке 4?

Answer 1

Я не уверен, что полностью понимаю необходимость в этом сценарии использования ... указав .form-inline, а затем хотите использовать .input-group во всю ширину, но каким-либо образом вне шаблона проектирования этого компонента?Это очень странно, но это можно сделать!

Тяжеловесы этого изменения - .form-control и .w-100.Поскольку вы применяете .form-inline к базовой форме, поведение всех различных элементов формы будет занимать столько ширины, сколько абсолютно необходимо;.w-100 говорит им, чтобы они взяли все это.

Применение .form-control к оболочке <div> позволяет Bootstraps CSS знать, как обрабатывать этот неожиданный элемент, но это вызывает некоторые конфликты с дочерним элементом <input>, который вынужно переопределить несколькими дополнительными классами.

На .form-control вам нужно удалить любые отступы, а на <input> вам нужно удалить хорошо ... все в основном.Вам нужно удалить границу по умолчанию (.border-0), добавить класс .rounded, чтобы избежать прямоугольного ограничения ввода в .form-control.Вам нужно, чтобы он занимал 100% ширины и высоты своих родителей (.w-100 и .h-100 соответственно)

И даже тогда у вас будет небольшое несоответствие с :focusэффект по сравнению с тем, как функционирует компонент .input-group, когда используется шаблон по умолчанию.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form class="form-inline p-3">

<div class="input-group input-group-lg w-100">
  <div class="form-control p-0"><input type="text" class="border-0 rounded w-100 h-100 text-center"></div>
  <div class="input-group-append">
    <button type="button" class="btn btn-warning"><i class="fas fa-search text-muted"></i></button>
  </div>
</div>

</form>