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

将文本放入表单

<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/

Answer 3

如果我误解了你，我深表歉意。我的母语不是英语。但是，我意识到您想安排在同一行？

.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>