Bootstrap: позволяет тексту обтекать поле ввода текста

Question

Я хотел бы создать интерфейс «заполнить пробел» с помощью начальной загрузки, где пользователи должны будут ввести пропущенное слово для завершения предложения.

Как я могу расположить текстовый ввод встроенным и позволить оставшемуся предложению обтекать его?

Это мой код:

elit at imperdiet dui accumsan <form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" id="textInput" placeholder="...">
  </div>
</form> sit amet nulla facilisi morbi tempus iaculis urna id volutpat

Вот как это выглядит (ввод текста, окруженный символами новой строки):

Вот скрипка: https://jsfiddle.net/f58hzou3/

Answer 1

У меня есть это решение для вас.Поместите весь текст в класс .form-group.Я должен добавить дополнительный класс .d-inline для обоих классов .form-inline и .form-group, чтобы текст был встроенным.Надеюсь, это сработает для вас.

Не забудьте последовать моему примеру на codepen

<div class="col-md-6">
  <form class="form-inline d-inline">
    <p class="form-group d-inline ">
      1. elit at imperdiet dui accumsan
      <input type="text" class="form-control mx-2" id="textInput" placeholder="Fill the gap"> sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
    </p>
  </form>
</div>

Answer 2

Прошу прощения, если я вас неправильно понял.Мой родной язык не английский.Но я понял, что вы хотите сделать аранжировку в одну строку?

.ok {
    display: flex;
}
.ok div {
    white-space: nowrap;
}

<div class="ok">
<div>elit at imperdiet dui accumsan</div> <form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" id="textInput" placeholder="...">
  </div>
</form><div>sit amet nulla facilisi morbi tempus iaculis urna id volutpat</div>
</div>

Answer 3

Поместите текст внутри формы

<form class="form-inline">
elit at imperdiet dui accumsan 
  <div class="form-group mx-2">
    <input type="text" class="form-control" id="textInput" placeholder="...">
  </div>
sit amet nulla facilisi morbi tempus iaculis urna id volutpat
</form>

https://jsfiddle.net/9fmtwL7n/